前端CSS3动画animation用法

2022 年 6 月 2 日
笔记
CSS3

前端CSS3动画animation用法

学习如下动画属性

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation-play-state
animation

1. @keyframes

@keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式

要使动画生效，必须将动画绑定到某个元素

用法1

点击查看代码

@keyframes anim {
  from {background-color: red;}
  to {background-color: blue;}
}

anim为动画的名称

from定义动画开始时小方块的背景色为红色

from定义动画结束时小方块的背景色为蓝色

用法2

点击查看代码

@keyframes anim {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

0%定义动画开始（完成0%）时小方块的背景色为红色

25%定义动画在完成25%时小方块的背景色为黄色

50%定义动画在完成50%时小方块的背景色为蓝色

100%定义动画结束（完成100%）时小方块的背景色为绿色

2. animation-name

@keyframes anim { ... }

anim就是动画的名称

3. animation-duration

动画完成一个周期应花费的时间（以秒或毫秒为单位）

animation-duration: 2s | 2000ms;

4. animation-delay

动画开始的延迟时间（以秒或毫秒为单位）

允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画（也就是动画提前两秒开始）

animation-delay: 2s;

5. animation-iteration-count

动画应播放的次数

animation-iteration-count: 3;

6. animation-direction

动画是向前播放、向后播放还是交替播放

animation-direction: normal | alternate;

normal：（默认）动画应该正常播放
alternate：动画应该轮流反向播放

7. animation-timing-function

动画的速度曲线

linear：动画从头到尾的速度是相同的
ease：（默认）动画以低速开始，然后加快，在结束前变慢
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束
cubic-bezier(n,n,n,n)：在cubic-bezier函数中自己的值。可能的值是从0到1的数值

8. animation-fill-mode

元素在不播放动画时的样式（在开始前、结束后，或两者同时）

animation-fill-mode : none | forwards | backwards | both;

none：（默认）不改变
forwards：当动画完成后，保持最后一个属性值(在最后一个关键帧中定义)
backwards：在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值(在第一个关键帧中定义)
both：向前和向后填充模式都被应用

9. animation-play-state

动画的运行与暂停

animation-play-state: paused | running;

paused：规定动画已暂停
running：规定动画正在播放

10. animation

设置所有动画属性的简写属性

animation: name duration timing-function delay iteration-count direction;

动画名称动画时长动画速度曲线动画延时动画播放次数动画是否应该轮流反向播放

Tags: CSS3