CSS3中过渡和动画的区别和各自适用场景？
区别：
1）语法：
过渡——transition: 属性名 完成时间 速度曲线 延迟时间;
动画——animation: 自定义名称 完成时间 速度曲线 播放次数 奇偶顺序 延迟时间;
@keyframes 自定名称{} 需要先定义关键帧，再通过animation属性引用关键帧
2）触发：
过渡：需要借助伪类、js、@media触发。常见的伪类是:hover ，:focus；常见的js就比如click事件；@media可以用于页面缩小到1000px你可以展示你需要的动画。
动画：自动触发
3）执行次数
过渡：执行一次后不会执行，但是可以借助transitionEnd事件添加循环；
动画：可以通过animation-iteration-count属性设置循环次数；
4）复杂度
过渡：简单动画效果，可以通过transition-timing-function属性展示动画的速度效果
动画：复杂动画效果，可以定义关键帧，控制每一帧的动画效果
适用场景：
transition：适用于当元素从一种样式变换为另一种样式时为元素添加效果
animation：可以在网页中取代动画图片、Flash及需要灵活定制多个帧以及循环的动画中
原文：https://www.cnblogs.com/qiankun215/p/13166106.html