CSS transition和animation的区别

Posted 2021-07-27 黑木令

本文章讲解内容是 transition 与 animition 动画效果的不同点与相同点, 虽然它们都可以实现CSS动画效果

结合 “css 动画实现的 3 种方式” 来理解; 因为这篇文章就是继这篇文章的延续。

废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

一：transition和animation的区别:

1. Transition 强调过渡; Animation 强调流程与控制 。


2. 两者的控制粒度不一样
   1. 某种程度上, transition 更加粗一点, 比如过渡的速度进行了封装, 可以控制是匀速改变还是贝塞尔曲线之类的。
   2. animation 提供的 keyframe 方法, 可以让你手动去指定每个阶段的属性; 此外 animation 还封装了循环次数, 动画延迟等功能, 更加自由和强大。

3. 动画状态: 
   1. CSS的 transition 只有两个状态:开始状态 和 结束状态 。
   2. animation 可能是多个状态, 有帧的概念 。
   
4. 动画触发方式:
   1. CSS的transition需要借助别的方式来触发, 比如CSS的状态选择器（如:hover）或 借助javascript来触发 。
   2. animation 不但可以使用上面的方式触发, 更重要的是可以自动触发 。
   
5. animation 控制动效上要比 transition 强，因为它具备一些控制动效的属性，比如“播放次数”、“播放方向”、“播放状态”等。

6. 动画实现的范围:
   1. transition 是有一定限制的, 并不是所有 CSS 的属性都具有过渡效果 。
   2. 另外相比而言, CSS 的 animation 要比 transition 强大的多, 几乎所有的 css 属性都可以实现动画效果。
   3. 这也是为什么使用 animation 制作 Web 动画的场景更多 。
   
7. 动画实现方式
   1. CSS 的 animation 是离不开 @keyframes 的，换句话说，我们需要先使用 @keyframes 来注册一个动画效果，即帧来描述动画效果。当然，只注册也不见得有效果，还是需要使用 animation-name 属性引用 @keyframes 注册好的动画效果。


"注意": CSS transform 也是用来制作动效的，这个说法有点偏颇，CSS transform 只不过提供了一些函数，可以做不同的变换，这些函数运用于 CSS 的 transition 或 @keyframes 中能得到一些不同的效果，特别是配上时间，缓动函数之类的，效果会更佳。因此也被识认为是动效中不可或缺。其实在 animation 中，可以发挥你的想象，使用 CSS 中任意属性，实现一些有创意的动效。

二：transition和animation的共同点:

1. 从整体来看，animation 和 transition 想做的事情都是一样, 通过控制属性变化的过程也, 实现动画; 都是立足于控制本身 dom 的 css 属性变化过程, 来实现动画的视觉效果。而你看 transform 就不同, 本身一个 css 属性 。

2. 他们都有“持续时间”、“延迟时间” 和“时间缓动函数”等概念，这些都是用来控制动效的效果。

三：推荐 CSS 动画网站:

1. https://animate.style/

3. https://www.animejs.cn/

之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题就是 "前端CSS " 相关的内容; 不积跬步，无以至千里, 戒焦戒躁 。

如果对你有所帮助，喜欢的可以点个关注或者给个赞；整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。