Crazy dots

[z4rd]

Dots doing their thing: loop animation with css3

Crazy dots

Start and direction

Coding time

[z4rd]

http://tid.tenpay.com/?p=5983

单项循环

双向循环

模拟双向

单向循环： animation-iteration-count: infinite; animation-direction: normal;
双向循环： animation-iteration-count: infinite; animation-direction: alternate;
模拟双向循环: 模拟双向循环动画就是不使用 animation-direction: alternate; 属性实现双向循环的效果

[z4rd]

http://www.qianduan.net/css3-animation/

[z4rd]

animation-timing-function，规定动画的运动曲线，这里有9个值，分别是
ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)