一顿饭，学会CSS动画（上）！

Lieme2021-09-082024-03-14

什么是CSS动画？

能够使元素逐渐从一种样式变为另一种样式。可以随意更改任意数量的 CSS 属性。

animation

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

1、animation-name

用来为 @keyframes 动画指定名称。

animation-name: donghua

2、animation-duration

用来定义动画播放完成花费的时间需要多少秒或者毫秒。

animation-duration: time

3、animation-timing-function

用来指定动画的完成过程是以何种速度曲线来实现的。通俗的讲就是匀速、加速或者匀速在加速。

与其他属性不同，我们除了可以使用CSS预置的属性值之外，还可以通过三次贝尔曲线来自定义值。

animation-timing-function: value

@value

liener                      // 匀速进行

ease                        // 慢速开始，加速，减速结束

ease-in                     // 慢速开始

ease-out                    // 慢速结束

ease-in-out                 // 慢速开始和结束

cubic-bezier(n,n,n,n)       // 自定义值 n的取值范围 0 -

除了上面属性之外还有个非常实用的函数steps(number，[end ‘ start])

用于实现逐帧动画，其中第一个参数number用于设置分几步完成，必须为整数。第二个参数可选start/end默认end。TA决定从一帧到另一帧的中间间隔是用开始帧还是结束帧来进行填充。选start就是表示第一帧立即执行，从第二帧开始然后第一帧结束。end则表示正常开始结束。

steps(N, start)将动画分为N段，动画在每一段的起点发生阶跃(即图中的空心圆 → 实心圆),动画结束时停留在了第 N 帧

steps(N, end)将动画分为N段，动画在每一段的终点发生阶跃(即图中的空心圆 → 实心圆),动画结束时第 N 帧已经被跳过(即图中的空心圆 → 实心圆)，停留在了 N+1 帧。

4、animation-delay

用来定义动画什么时候开始，可以为负数，负数的时候表示跳过而进入动画,单位是秒或者毫秒。

animation-delay: time

5、animation-iteration-count

用来定义动画播放的次数，可以设置整数或者infinite（无限次）

animation-iteration-count: value

6、animation-direction

定义动画的播放循序。

animation-direction: value

@value

normal                  // 正常

reverse                 // 反向播放

alternate               // 奇数正向播放，偶数反向播放

alternate-reverse       // 奇数反向播放，偶数正向播放

7、animation-fill-mode

用来设置动画结束后所要应用的动作or属性值

animation-fill-mode: value

@value

none            // 无
forwards        // 动画结束后保持最后一个属性值
backwards       // 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值
both            // 向前和向后填充模式都被应用

8、animation-play-state

指定动画是运行还是暂停

animation-play-state: paused'running;

@keyframes

用来创建一个动画的具体实现过程

@keyframes donghua
{
    from {
      width: 100px;
    }
    to {
      width: 200px;
    }
}

Transition

谈及CSS动画属性，我们不得不说下transition这个属性，因为TA基本是和animation配对出现。

Transition CSS的过渡属性。

语法

transition: property duration timing-function delay;

1、transition-property

设置应用过渡效果的CSS属性名称。默认值是all，可以单独指定。

transition-property: none ' all ' 具体CSS属性值名;

2、transition-duration

用来设置完成过渡效果需要花费的时间（秒/毫秒）

transition-duration: value

3、transition-timing-function

用来设置动画过渡效果的速度曲线。

transition-timing-function: value

@value

linear                      // 匀速-结束

ease                        // 慢速-加速-减速-结束

ease-in                     // 慢速开始-结束

ease-out                    // 开始-慢速结束

ease-in-out                 // 慢速开始-慢速结束

cubic-bezier(n,n,n,n);      // 自定义值，n 0-1之间

4、transition-delay

设置过渡效果何时开始。单位是（秒/毫秒）

transition-delay: time

Transform

用来设置元素的 2D => 3D 转换。实现元素的旋转、缩放、移动或者改变形状。

1、transform: matrix(n,n,n,n,n,n)

用来定义2D转换

2、transform: matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

用来定义3D转换

3、transform: translate

用来实现元素在x,y轴上平移效果。

4、transform: translate3d

用来实现元素在x,y,z轴上平移效果。

5、transform: scale

用来实现2D下的缩放。

6、transform: scale3d

用来实现3D下的缩放。

7、transform: rotate

用来实现2D下的旋转。

8、transform: rotate3d

用来实现3D下的旋转。

9、transform: skew

用来实现2d方向的倾斜

10、transform: perspective

将该元素的子元素设置透视效果，搭配perspective-origin使用。

本篇主要将动画涉及到的三个基本属性以及属性值回顾了一遍，下篇文章将重点对每个属性值的效果进行实际应用。