现在我们机遇来看看@keyframes的具体用法吧。它与其他的属性并不一样，它定义的动画并不直接执行，需要借助animation来运转。@keyframes animationName { ... }上面的写法定义了动画的名字为 animationName，挺简单的，就和js中定义函数名类似。
@keyframes animationName { ... }animationName 后面的大括号内定义了具体的动画效果，他需要一个过程，否则就无法出现变化了。@keyframes animationName { from { ... } to { ... } }from...to...就表示了这样一个过程，规定了动画起始的状态和结束的状态（相当于0%与100%）
在@keyframes animationName { from { ... } to { ... } }中，里面呆着省略点的花括号里，这里你可以写入你想应用的CSS样式，这里你不仅能改变宽高，还能使用CSS3中添加的2D、3D变化效果。示例代码：@keyframes animationName { from { transform:rotateX（60deg） translateZ( -180px ); width:100px; } to { transform:translateZ( 180px ); width:200px; } }下面图片的效果就是动画做出来的，这里就不演示了。
当然你也可以直接用百分值写：@keyframes animationName { from { ... } 20% { ... } 40% { ... } to { ... } }不仅如此，你还可以定义多个阶段的效果：@keyframes animationName { 0 { ... } 50% { ... } 75% { ... } ...... 100% { ... } }丝毫不影响效果，反而能展现的更丰富，因为你可以任意的添加自己需要的阶段效果
@keyframes的用法就介绍到这里，下次会结合transition、transform等给大家介绍几个常见的动画效果。