animation与transition

animation

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

demo1

 @-webkit-keyframes demo-animation1{
         0% {
             -webkit-transform:translate3d(0,0,0);
             transform:translate3d(0,0,0);
         }
         100% {
             -webkit-transform:translate3d(10px,0,0);
             transform:translate3d(10px,0,0);
         }
     }
     @keyframes demo-animation1{
         0% {
             -webkit-transform:translate3d(0,0,0);
             transform:translate3d(0,0,0);
         }
         100% {
             -webkit-transform:translate3d(10px,0,0);
             transform:translate3d(10px,0,0);
         }
     }
     .demo1{
         -webkit-animation-name:demo-animation1;
         animation-name:demo-animation1;
         -webkit-animation-duration:.5s;
         animation-duration:.5s;
         animation-iteration-count: infinite;
         -webkit-animation-iteration-count: infinite;
         /*-webkit-animation-fill-mode: both;
         animation-fill-mode: both;*/
         animation-direction: alternate;
         -webkit-animation-direction: alternate;
     }

transition

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

demo2

 .demo2:hover{
     -webkit-transform:translate3d(10px,0,0);
     transform:translate3d(10px,0,0);
     }
     .demo2{
     -webkit-transform:translate3d(0,0,0);
     transform:translate3d(0,0,0);
     -webkit-transition:transform .5s;
     transition:transform .5s;
     }