animation与transition

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     }