【心得总结】css3 动画 涉及单词总结

.hha{transition:transform .5s ease 1s;}
.hha:hover{transform:scale(.5) translate(20px 20px);}
transform  rotate skew  scale translate
transform-origin
transform-style:flat  preserve-3d
transform:perspective(1000px);
perspective:1000px



transition: <property> <duration> <timing-function> <delay>;
transition-property
transition-duration
transition-timing-function:ease linear  ease-in ease-out ease-in-out
transition-delay



animation:
animation-name:    
animation-duration:
animation-timing-fuction:
animation-delay:
animation-iteration-count:number /infinite
animation-direction:normal/alternate
animation-play-state:running paused;
animation-fill-mode:forwards backwords both

test{animation:haha 1s ease 1s 5 alternate running forwards;}

@-webkit-keyframes haha{
0%{-webkit-transform:rotate(0deg) translatex(20px);}
100%{-webkit-transform:rotate(360deg) translatex(0);}
}

转载于:https://www.cnblogs.com/zhp404/articles/4325422.html