CSS中有几个变换属性特别容易混淆:animation(动画)、transition(过渡)、transform(变形)、translate(移动)。前面两个是动态的,后面两个是静态的结果。当然动➕静还是动。本次主要探讨animationtransition

transition

强调的css样式属性过渡。你可以认为是:hover概念的延伸。

语法结构是这样子的:戳MDN

transition: transition-property transition-duration transition-timing-function [transition-delay]

// 👇demo
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

animation

强调元素动画,使用和flash相同的概念(@keyframe)。通过描述每一帧之间的状态定义一个动画,交由浏览器内部计算帧差异并处理过渡效果(因此animation相对而言需要消耗更多的性能)。

语法结构如下:严格定义戳MDN

// 简化结构版
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

@keyframes animation-name { ** }

使用animation就是一组语句,需要使用@keyframes定义一个动画效果,然后交给animation处理。animation在处理过程中有几个关键属性:animation-timing-functionanimation-direction

animation-timing-function

表明动画之行过程和时间的关系,想要做到优秀的动画效果离不开这个大佬,默认有ease-in-out、linear等或者你可以使用吊炸天的贝塞尔曲线cubic-bezier

animation-direction

指示动画是否反向播放,有四个值:

  • normal每个循环内动画向前循环,换言之,每个动画循环结束,动画重置到起点重新开始,这是默认属性。
  • alternate动画交替反向运行,反向运行时,动画按步后退,同时,带时间功能的函数也反向,比如,ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
  • reverse反向运行动画,每周期结束动画由尾到头运行。
  • alternate-reverse反向交替, 反向开始交替动画第一次运行时是反向的,然后下一次是正向,后面依次循环。决定奇数次或偶数次的计数从1开始。

很笼统,举个例子:现在动画定义的是黄色变成黄色。四个值对应的变化效果如下图所示:

animation-direction

你要实现一个涟漪效果,可以使用normal,但是要实现呼吸效果的话,alternate就没跑了。至于加不加reverse就看需要了。

总的说transition强调样式属性过渡,避免元素位置、颜色、尺寸变化过程看起来生硬没有感情。animation强调帧动画,API更充裕,能实现的效果更多,当然复杂动画性能更吃紧。WEB动画一致在寻求一种平衡。复杂动画到底是css还是js实现说法不一,需要根据场景对比研究,关于js动画必须推一下Lottie-Web

临了推荐一篇CSS启用GPU加速的文章:Web 性能优化-CSS3 硬件加速(GPU 加速)

0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x