你的位置:首页 > 网页设计

[网页设计]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   }