标签:style blog color io 使用 ar for div sp
<div class="center"></div>
1 .center{ 2 border: 1px solid #332; 3 width: 60px; 4 height: 60px; 5 border-radius: 60px; 6 background: rgba(0,0,0,0.5); 7 -webkit-animation:ani 1s ease-in 2 alternate both; 8 } 9 @-webkit-keyframes ani{ 10 0%{-webkit-transform:translateX(0);} 11 50%{-webkit-transform:translateX(40px);} 12 100%{-webkit-transform:translateX(100px);} 13 }
注释:当设置方向为反方向的时候,根据动画执行的次数判断小球是否处于backwards还是forwards的状态,以上代码是执行偶数次,动画来回运动,最终回到初始状态极为backwards状态,当为奇数次时,则为结束状态forwards状态
如何理解css3 -webkit-animation-fill-mode属性值为both时的使用方法
标签:style blog color io 使用 ar for div sp
原文地址:http://www.cnblogs.com/tingting4133/p/3966221.html