CSS3中过渡和动画的区别和各自适用场景？

 

区别：

1、语法：

        过渡——transition: 属性名 完成时间 速度曲线 延迟时间;

         动画——需要先定义关键帧，再通过animation属性引用关键帧

2、触发：

       过渡：需要借助伪类、js、@media触发

        动画：自动触发

3、执行次数

          过渡：执行一次后不会执行，但是可以借助transitionEnd事件添加循环；

       动画：可以通过属性设置循环次数；

4、复杂度

         过渡：简单动画效果，可以通过属性展示动画的速度效果

         动画：复杂动画效果，可以定义关键帧，控制每一帧的动画效果

适用场景：

transition：适用于当元素从一种样式变换为另一种样式时为元素添加效果

animation：可以在网页中取代动画图片、Flash及需要灵活定制多个帧以及循环的动画中