两个：一个transition,一个animation
transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。 --yuanyifeng
animation-name: rainbow;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-direction: normal;
animation-iteration-count: 3;
animation 和transition想做的事情都是一样，通过控制属性变化的过程，也实现动画。都是立足于控制本身dom的css属性变化过程，来实现动画的视觉效果。而你看transform就不同，本身一个css属性。区别就是，两者的控制粒度不一样。某种程度上，transition更加粗一点，比如过渡的速度进行了封装，可以控制是匀速改变还是贝塞尔曲线之类的。而animation提供的keyframe方法，可以让你手动去指定每个阶段的属性。此外animation还封装了循环次数，动画延迟等功能，根据自由和强大。中天天说，就是上面一些总结的很好内容，简单的情况选用transition，自由一点或者复杂的可以用animation。
作者：李文龙 链接：www.zhihu.com/question/19…
