CSS3 @keyframes 规则

CSS3真的很棒，很酷炫。但是很多动画特效基本的方法都写过一遍，都看过。但是遇到一些酷炫的特效时，有时候真的挺懵逼的，一时间想不到如何去实现它。

比如下面这个效果，是使用CSS3 @keyframes 规则实现的，之前在某个网站上看到过，研究了一下。

在线Demo1:http://www.bright2017.top/test1/test1-19/

在线Demo2:http://www.bright2017.top/test1/test1-20

使用@keyframes规则，你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，您可以更改CSS样式的设定多次。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。

0％是开头动画，100％是当动画完成。

为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。