在前端开发中，我经常碰到一些不能马上理解的css属性，于是打算以后但凡碰到这些微妙又模糊的属性，都归纳到这里。

一、animation的语法

CSS3提供给了我们非常多的转换函数：

在我们这次的新设计教程中，我将向您展示如何创建纯CSS3的loading加载动画组件(没有任何图像)。我认为它可以为你减少项目的代码量和额外的图像对你网站的负载。我准备了三种不同风格的加载组件。现在，让我们看看我做的。

Chrome下效果理想，Firefox，IE9下没有动画效果。

@keyframe规定动画

以往JS控制的动画大多使用setInterval或者setTimeout每隔一段时间刷新元素的位置，来达到动画的效果，但是这种方式并不能准确地控制动画帧率，尽管主流的浏览器对于这两个函数实现的动画都有一定的优化，但是这依然无法弥补它们性能问题。主要原因是因为JavaScript的单线程机制使…

规则用于创建动画。@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果@keyframes中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

HTML第1个例子中的HTML标记非常简单，我们在页面上创建了一个ul列表标记，并在其内部创建了几个div来控制它的总体进度动画，代码如下：