前端学习 10/15

前端学习 10/15 第八天

1. || means or 

2. input type = 'range'

3. transition: 

transition: color 0.5s, font-size 1s;

transition: all 0.5s;

>>>>>>

transition-property: font-size;

transition-delay: 1s;

transition-duration: 0.5s;

transition-timing-function: ease-in;

============is equal to =============

transition: font-size 0.5s ease-in 1s;

4. keyframes

@keyframes grow {

from {width: 50px; height: 50px; background: red;}

to {width: 50px; height: 100px; background: green;}

}

@keyframes grow {

0% {width: 50px; height: 50px; background: red;}

50% {width: 100px; height: 50px; background: blue;}

100% {width: 100px; height: 100px; background: green;}

}

5. animation: 

animation-name: grow;

animation-duration: 1s;

animation-timing-function: ease-in;

animation-delay: 1s;

animation-iteration-count: 4;

animation-direction: alternate;

============is equal to =============

animation: grow 1s ease-in 1s 4 alternate;

>>>>>>>>>>

animation-fill-mode: both;

6. transform scale 

@keyframes transform {

100% {transform: scale(2,4);}

}

============is equal to =============

@keyframes transform {

100% {transform: scaleX(2) scaleY(4);}

}

7. transform translate        

@keyframes transform {

100% {transform: translateX(50%) translateY(25%);}

}

============is equal to =============

@keyframes transform {

100% {transform: translate(50%, 25%);}

}

8. transform rotation 

@keyframes transform {

100% {transform: rotate(-180deg)}

}

9. transform shorthand 

@keyframes transform {

100% {transform: scale(0.5,0.5) rotate(45deg) translate(50px,0px);}

}