今天自己摸索了一下css3动画的写法，主要是兼容w3c和WebKit引擎写法。以下是我简单的实现了一个循环播放的家在动画，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>chasing dot</title> <style type="text/css"> .spiner{//定义容器 margin:100px auto; width:40px; height:40px; position:relative; text-align:center; -webkit-animation:rotate 2s infinite linear;//容器加载旋转动画，用时2s，无限循环，线性速度 animation:rotate 2s infinite linear; } .dot1, .dot2{//定义运动元素 可以采用伪元素来代替 position: absolute; width:60%; height:60%; display:inline-block; top:0; background-color:#333; border-radius:100%; -webkit-animation: zoom 2s infinite linear;//运动加载缩放动画，用时2S,无限循环，线性速度 animation: zoom 2s infinite linear; } .dot2{ top:auto; bottom:0; -webkit-animation-delay:-1.0s; animation-delay:-1.0s; } @-webkit-keyframes rotate{//定义旋转动画（兼容WebKit写法） 100%{-webkit-transform:rotate(360deg)} } @keyframes rotate{//兼容w3c写法 100%{ transform:rotate(360deg); -webkit-transform: rotate(360deg); } } @-webkit-keyframes zoom{//定义缩放动画（兼容WebKit写法） 0%,100%{-webkit-transform:scale(0.0)} 50%{-webkit-transform:scale(1.0)} } @keyframes zoom{//兼容W3C写法 0%,100%{ transform:scale(0.0); -webkit-transform:scale(0.0); } 50%{ transform:scale(1.0); -webkit-transform:scale(1.0); } } </style> </head> <body> <div class="spiner"> <div class="dot1"></div> <div class="dot2"></div> </div> </body> </html>
效果为：
其中，动画的运动速度是参数：
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
是不是很明了，记录一下，go on,fighting!