大家有没有觉得前面讲的 CSS 过渡效果和 jQuery 的动画十分类似。事实上他们还是有很多区别的，但是在基础效果上，它们确实有些相似。
这时候不禁让人好奇，那 CSS 的动画又是什么样子的呢？
区别也不是太大，依旧是让 CSS 属性在不同的状态间平滑的过渡，但是它可以实现的效果更加复杂。，
首先过渡效果一定要有事件去触发，而动画效果可以不需要。
过渡效果执行一次就结束了，而动画效果可以设定执行的次数或者无限循环下去。
过渡有一个确定的执行方向，从当前样式到结果样式；而动画效果因为可以执行多次，所以在循环的过程中，变化的方向也可以进行改变。
上面是一些主要的区别，像循环以及方向性的问题，用其他方法也可以变相实现，但是不如 CSS 动画来得简单直接。
比如说制作一个加载中的等待动画，用 CSS 动画就非常合适。
以上是理论部分，下面我们来讲一讲实际的书写。因为动态效果的方向性都不确定，这时候我们就不能拿初始状态作为其中的一个默认值了，而是应该明确的给出初始和结束值。或者应该说没有真正的初始和结束，我们只是设定两个端点。
这时候我们需要用到一个特殊的对象 @keyframes，就是关键帧，注意它加了复数，所以这一个对象中可以包含动画中的所有关键帧。前面的 @ 我们在 @font-face 里面也见到过。这种是说我们写在 CSS 之中，用的也是基本的 CSS 语法，但是他们所做的事情和普通的 CSS 是有区别的。这个名字虽然放在选择器这里，但它并不是一个真正的选择器，所以前面加上一个 @，以示区分。
也就是说，我们的关键帧要和元素分开，单独去定义（意味着可以在多个元素上复用）。我们一个页面之中，可能不止需要一个（一种）动画效果，所以我们肯定要对这一组的关键帧进行命名。
@keyframes move_it {from { margin-left: -20%; }to { margin-left: 100%; }}move_it 是这一系列关键帧的名字，后面我们需要使用的时候，就用这个名字来称呼它。
里面包含了两帧，名字是 from 和 to。分别是起始状态和结束状态，但在实际使用中，你们可以通过其他属性去控制，正向或者反向执行这个动画的变化，
就是这样一个格式，比普通的 CSS 稍微复杂一点，但是基础语法都是一样的。我们要描述的也就是开始时的 CSS 样式和结束时的 CSS 样式。
然后怎么去使用呢？我们只给需要进行动画的元素加上如下属性：
#miao {animation: 3s move_it;}注意这里省略了该元素的其他样式。解释一下的话，就是告诉这个元素你具有动画，动画的时长是三秒，要做哪些变化呢？就是 move_it 这一组关键帧中所指定的变化。
我们也可以根据需求，通过一些事件的触发，动态的给元素增加和移除动画效果。
这些就是 CSS 动画最基础，最核心的内容。
暂无评论内容