伴随HTML5而来的CSS3让前端小伙伴们可以用简单的CSS样式即可写出动画效果来，而在这之前，一提到动画我们可能会想到Javascript，Flash，等。如果是用Javascript那倒也不是很糟糕的事啦，但如果写出来的效果非要强迫客户端安装第三方插件才能显示，毕竟不是很理想。这也就是为什么谷歌会不遗余力地推广他所主导的开源项目WebRTC (Web Real-Time Communication)，把实时通讯的功能都做进浏览器，像视频通话这样的高级应用直接在Javascript里调用几个浏览器API即可实现!这在以前想都不敢想。
再加上HTML5将很多之前需要依赖外部程序或者需要程序员们写大量JS来实现的东西标准化了，一个目的就是丰富Web设计，彻底丢弃第三方插件，让浏览器干干净净。说了这么多，让我开始谈谈CSS3的动画。
在CSS3中定义动画是件很方便的事情。原理有点像使用Adobe公司的Flash软件来制作动画。
比如定义好一个物体的开始位置及状态，0秒的时候一个红色50x50的矩形处于画面中央，再将画面定位于时间轴上3秒处，将矩形设为100x100黄色。再右键添加补间动画。这样一个简单的动画便完成了。像关于位移，颜色渐变，甚至旋转，3D效果等的动画，现在都可以用CSS来做了。
请考虑这样一种情形，你想在Web页面使用设计师使用的一种字体，因为设计是那帮不懂Coding的平面设计师搞出来的，老板看了觉得还不错，剩下实现的问题就交给你了。因为这种字体不是很通用，所以用户电脑上有很大可能是没有装这一字体的，那就意味首页面在用户电脑上的呈现会不一致，页面找不到指定的字体会调用系统默认的字体。
所以我们考虑把字体文件包含到CSS里去，换句话说把字体文件发送到客户端。于是实现要改，这时使用@font-face 来指定字体文件的路径，这个时候我们初次看到引入了一个@符号
从上面我们大致可以这样理解此种情况下的@符号，虽然不太正确(比如@import, @media)，通过它定义了一个特殊场合下的变量，这里是定义字体，在动画里是定义动画关键帧，然后我们会在CSS代码的其他地方使用这个定义好的变量。
什么是关键帧。一如上面对Flash原理的描述一样，我们知道动画其实由许多静态画面组成，第一个这样的静态画面可以表述为一帧。其中关键帧是在动画过程中体现了物理明显变化的那些帧。
比如之前的例子中，元素div由50x50红色的大小变化到状态100x100 黄色的过程中，这一头一尾的两个状态起到了对动画定义的关键作用。所以这两个状态就是整个动画的关键帧。
通过之前的胡说现在我们看到@keyframes就不会觉得这个@符号有多别扭了。我们使用它来定义动画的关键帧。
其中状态部分指定元素的样式，因此可以是各种你想要的CSS代码，颜色尺寸透明度旋转等。from指定了动画过程的开始状态，to指定了动画结束时元素的状态。所以整个动画也就是从from指定的开始状态变化到to指定的状态的过程。
当然对于状态的定义不局限于开始和结束两个时间点，我们可以指定一个动画过程中任何时间点元素的状态。下面是定义关键帧的另一种写法。
上面定义了整个动画过程中0%，50%，100%三个时间点元素的状态。比如我们定义了一个时长为10秒的动画，那么0%就是动画开始时0秒的时候，0%后面的代码指定元素在动画开始时是怎样的，然后50%也就是动画进行到5秒的时候，元素又是什么样子。最后100% 对于动画进行到10秒也就是动画结束时元素的状态。
当我们使用@keyframes定义好了一个动画，它并不会执行产生任何效果，直到我们通过animation属性将动画应用到相应元素上。
其中name和duration 是必需的，如果不指定duration默认为0，也就是动画持续0秒，所以就无法看到动画效果。
上面介绍过通过百分比的形象我们可以指定动画过程中任何时间点时元素的状态，将上面的版本变为百分比版本是非常容易的事情。
比如开始的状态不改变，增加一个动画进行到50%时颜色为黄色大小为75X75，最后为绿色大小为100x100。
如果我们指定了direction为alternate的话，当动画播放到结尾时，它会以相反的方向回到动画开始的状态，然后一直这样交替播放。
有了上面的基本了解，我们可以写一些简单的动画了。但线动画是需要花一些功夫的，这里就不继续了。各位小伙伴们，你们是否看懂了呢?
