CSS 动画

提到 CSS 动画，很容易想到几个关键词，transform,transition,animation等。作为一个没有动画 / 美术相关基础的后端，很容易被这些概念所混淆。

此文主要阐释 CSS 动画中涉及到的一些概念。

简单来说，动画有关的概念只有两个。状态和过程。

状态用于描述动画开始前后相关事物的初始状态和结束状态。

过程用于描述动画如何发生，涉及到动画发生时间，速度等过程属性。

具体到 transform，transform ，以及其他描述 box 的属性均是与状态相关的，只用于描述 box 状态。

而对于 transition 和 animation，则只用于描述动画过程相关的属性。

因此学习 CSS 动画，也就是学习 transition和animation的应用。

transition#

主要用于创建从一个 CSS 值到另一个 CSS 值的平滑过渡。
需要触发器来运行 CSS 转换。例如，hover触发过渡。
过渡只有两种状态：初始状态和最终状态。无法定义中间态，（中间过程的计算由相关算法决定）。
仅运行一次。
最适合用于基本样式更改。

animation#

可以定义中间态（也就是关键帧）。
不需要触发器。
适合用于动态样式更改。

transition 使用#

下面详细描述transition的使用

transition需要两个属性

transition-property 描述对哪个 css 属性进行转换。
transition-duration 描述过渡所需的时间。

增强#

transition-timing-function

对过渡过程进行一步定制，简单的过渡是线性的，非常平稳。

而通过指定 timing 函数，可以进一步定制动画效果（缓动函数），实现流畅的动画。

比如贝塞尔函数cubic-bezier，线性函数linear或是上层封装ease-in,ease-out

transition-delay 触发时的延迟
transition-behavior ，其中 allow-discrete 可以使动画可逆
在 normal情况下，动画触发后当触发条件不在满足，元素状态会回归初始状态，此时不会具有过渡效果。
而在 allow-discrete情况下，元素回归初始状态时，也会具有过渡效果。

transition-behavior - CSS: Cascading Style Sheets | MDN

animation 使用#

animation 由关键帧和动画属性定义

关键帧#

关键帧定义元素中间态，但是不一定与某个元素相关，因为定义中间态是通过给出属性值实现的，因此，可以将动画应用到不同的元素上。

语法格式如下：

css

@keyframes [keyFrameName] {
  [moment-selector] { 
    [css-properties: property-value;]
  }
}

@keyframes [keyFrameName] {
  [moment-selector] { 
    [css-properties: property-value;]
  }
}

示例

css

@keyframes squre {
  0% { 
    top: 30px;
  }
  75% {
    top: 300px;  
  }
}

@keyframes squre {
  0% { 
    top: 30px;
  }
  75% {
    top: 300px;  
  }
}

动画属性#

关键帧描述了一些动画过程中的状态，而动画属性则进一步描述其他方面，如应用于哪里。

animation-name，指定要应用的关键帧名字。
animation-duration，一个动画周期的时间。
animation-timing-function，描述关键帧出现的时间，比如有25%处的关键帧，通过该函数，可以描述0%到25%出现的快慢。也是应用贝塞尔函数（缓动函数）
animation-delay，动画启动延迟
animation-iteration-count，动画重复次数
animation-direction，定义动画第一次开始时的方向，比如从 100%到0%，或是0%到100%
animation-play-state，定义动画是否暂停
animation-fill-mode，动画运行前后，相关元素的样式。比如保留第一个关键帧的样式或是最后一个关键帧的样式。

More#

简单来说，animation是对transition的增强。而transform这类属性则是定义动画状态常用的工具属性。

以上所述为如果描述动画，从而让元素可以实现动画效果。

但是还有一些问题，以下一一阐述。

动画用在哪里，什么场景使用动画？#

基于常用的场景，从而可以进行封装

先列举几个容易想到的关键词。

指针hover, 元素click

元素drag, 元素Tap

进入动画, 退出动画

这是常用动画的场景

用什么样的动画？#

从其他系统（Framer.motion）的经验来看，可以简单分为

Tween（补间动画）

Spring（弹性）

Inertia（惯性）

其中 Tween 模拟物体运动的模式，比如加速运动、减速运动、匀速运动。

常用于元素位移还是透明度、还是颜色、尺寸大小等等属性。

![[img/image.gif]]

Spring 弹性动画则模拟具有弹性物体的运动，在开始或结束的时候，会有回弹。

Inertia，则模拟惯性变化模式，比如模拟元素被拖拽，然后放开之后的惯性运动。

frame motion 的这三种动画封装屏蔽了一些底层细节，但是处理常用的 duration 属性外，也引入了一些新的概念。

Tween#

ease, 封装好的缓动函数
from，起始值
times，关键帧时间，如 [0, 1, 0.5, 1]，配合关键帧，可以选择动画对应的关键帧

Spring#

bounce 弹性大小
damping 反方向的阻力
mass 模拟物体质量大小
stiffness 弹性表现硬度的数值
velocity 动画开始初速
restSpeed 临界速度，与 restDelta 结合使用
restDelta 临界距离，与 restSpeed 结合使用，当动画速度与剩余距离均低于临界值是停止动画

Inertia#

modifyTarget
bounceStiffness 弹性表现硬度
bounceDamping 反向阻力
power 惯性大小
timeConstant 衰减时间
restDelta 剩余距离
min 最小值
max 最大值

framer motion