当前位置: article > 正文

CSS系列之动画_css动画

作者：weixin_40725706 | 2024-03-19 00:00:07

踩

css动画

1、什么是动画

动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数

2、动画的基本使用

先定义动画；
再调用定义好的动画；

3、定义动画

3.1、语法格式

@keyframes 动画名称 {
  0% {
      width: 100px;
  }
  100% {
      width: 200px
  }
}
1
2
3
4
5
6
7
8

3.2、`@keyframes`

关键帧 @keyframes 通过在动画序列中定义关键帧（或waypoints）的样式来控制 CSS 动画序列中的中间步骤。和转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。

3.2.1、取值

custom-ident

帧列表的名称。名称必须符合 CSS 语法中对标识符的定义。

from

等价于 0%。

等价于 100%。

百分数

动画序列中触发关键帧的时间点，使用百分值来表示。

3.2.2、形式化语法

@keyframes <keyframes-name> {
  <keyframe-block-list>
}
where 
<keyframes-name> = <custom-ident> | <string>
<keyframe-block-list> = <keyframe-block>+

where 
<keyframe-block> = <keyframe-selector># {
  <declaration-list>
}

where 
<keyframe-selector> = from | to | <percentage>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.2.3、注意点

如果一个关键帧规则没有指定动画的开始或结束状态（也就是，0%/from 和100%/to，浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画，最终返回初始状态。
如果在关键帧的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。
如果多个关键帧使用同一个名称，以最后一次定义的为准。 @keyframes 不存在层叠样式(cascade)的情况，所以动画在一个时刻（阶段）只会使用一个的关键帧的数据。
如果一个 @keyframes 内的关键帧的百分比存在重复的情况，则@keyframes规则中该百分比的所有关键帧都将用于该帧。如果多个关键帧指定了相同的百分比值，则@keyframes规则内是可以使用层叠样式的。
如果一个关键帧中没有出现其他关键帧中的属性，那么这个属性将使用插值（不能使用插值的属性除外，这些属性会被忽略掉）。
如果某一个关键帧出现了重复的定义，且重复的关键帧中的 CSS 属性值不同，则以最后一次定义的属性为准。
关键帧中出现的 !important 将会被忽略。

4、使用动画

4.1、语法格式

div {
	/* 调用动画 */
    animation-name: 动画名称;
 	/* 持续时间 */
 	animation-duration: 持续时间；
}
1
2
3
4
5
6

4.2、animation

animation 属性是 animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

4.2.1、语法

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。

每组动画规定的属性如下：

以下属性出现0次或1次：

animation-timing-function
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

animation 的 name 值可能是：none，<custom-ident>，<string>
<time> 可能会出现0、1 或 2 次

每个动画定义中的属性值的顺序很重要：可以被解析为 <time> 的第一个值被分配给animation-duration，第二个分配给 animation-delay。

每个动画定义中的值的顺序，对于区分 animation-name 值与其他关键字也很重要。解析时，对于除 animation-name 之外的有效的关键字，必须被前面的简写中没有找到值的属性所接受。此外，在序列化时，animation-name 与以及其他属性值做区分等情况下，必须输出其他属性的默认值。

4.2.2、简写

实际开发中一般是简写成这样的，实际上没有顺序。

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
1
2

4.3、animation-name

animation-name 属性指定应用的一系列动画，每个名称代表一个由 @keyframes 定义的动画序列。

4.3.1、属性值

none

特殊关键字，表示无关键帧。可以不改变其他标识符的顺序而使动画失效，或者使层叠的动画样式失效。

IDENT

标识动画的字符串，由大小写敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置。

4.4、animation-duration

animation-duration 属性指定一个动画周期的时长。

4.4.1、属性值

<time>

一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。

4.4.2、注意点

默认值为0s，表示无动画。

4.5、animation-timing-function

animation-timing-function 属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个 <timing-function> 。

4.5.1、属性值

同CSS系列之过渡 transition（CSS3）----transition-timing-function

4.6、animation-delay

animation-delay 属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

4.6.1、属性值

<time>

从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(ms)。如果未设置单位，定义无效。

4.6.2、注意点

0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；
定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。
如果为动画延迟指定了一个负值，但起始值是隐藏的，则从动画应用于元素的那一刻起就获取起始值。

4.7、animation-iteration-count

animation-iteration-count 属性，定义动画在结束前运行的次数，可以是1次、无限循环。

4.7.1、属性值

infinite

无限循环播放动画。

<number>

动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。

4.7.2、注意点

animation-iteration-count 属性可以指定一个或多个以逗号分隔的值。
如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。

4.8、animation-direction

animation-direction 属性指示动画是否反向播放。

4.8.1、属性值

normal

每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。

alternate

动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为 ease-out。计数取决于开始时是奇数迭代还是偶数迭代

reverse

反向运行动画，每周期结束动画由尾到头运行。

alternate-reverse

反向交替，反向开始交替
动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。

4.9、animation-fill-mode

animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。

4.9.1、属性值

none

当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。

forwards

目标将保留由执行期间遇到的最后一个关键帧计算值。最后一个关键帧取决于animation-direction 和 animation-iteration-count 的值

在这里插入图片描述

backwards
动画将在应用于目标时立即应用第一个关键帧中定义的值，并在 animation-delay 期间保留此值。第一个关键帧取决于 animation-direction 的值：