animation与transition_html/css_WEB-ITnose

animation

动画，无法直接决定开始时间

demo1

 1 @-webkit-keyframes demo-animation1{ 2         0% { 3             -webkit-transform:translate3d(0,0,0); 4             transform:translate3d(0,0,0); 5         } 6         100% { 7             -webkit-transform:translate3d(10px,0,0); 8             transform:translate3d(10px,0,0); 9         }10     }11     @keyframes demo-animation1{12         0% {13             -webkit-transform:translate3d(0,0,0);14             transform:translate3d(0,0,0);15         }16         100% {17             -webkit-transform:translate3d(10px,0,0);18             transform:translate3d(10px,0,0);19         }20     }21     .demo1{22         -webkit-animation-name:demo-animation1;23         animation-name:demo-animation1;24         -webkit-animation-duration:.5s;25         animation-duration:.5s;26         animation-iteration-count: infinite;27         -webkit-animation-iteration-count: infinite;28         /*-webkit-animation-fill-mode: both;29         animation-fill-mode: both;*/30         animation-direction: alternate;31         -webkit-animation-direction: alternate;32     }

transition

变化，可以直接通过hover状态来设置开始时间

demo2

 1 .demo2:hover{ 2     -webkit-transform:translate3d(10px,0,0); 3     transform:translate3d(10px,0,0); 4     } 5     .demo2{ 6     -webkit-transform:translate3d(0,0,0); 7     transform:translate3d(0,0,0); 8     -webkit-transition:transform .5s; 9     transition:transform .5s;10     }