使用animation实现复杂形态过渡动画

375 字

2 分钟

使用animation实现复杂形态过渡动画

2026-03-15

Web前端笔记

无标签

之前使用transition属性确实是让元素在变换的时候有了过渡的动画效果，但是如果想要实现一个属性的三次甚至多次变换，就需要使用另外一个动画属性animation。

`animation`属性组成#

定义 - 移动时间中每一个部分需要变换的属性

应用 - 将定义的动画应用到元素上

定义#

格式：

1
@keyframes {
2
    0% {
3

4
    }
5
    50% {
6

7
    }
8
    100% {
9

10
    }
11
}

写法：

其中间可以是1-99的任意值，50%仅为格式示意

在大括号内直接写属性需要实现的效果

定义开始和结尾，可以使用上面的格式也可以使用下面的格式，虽然正确，但是统一性不强

1
@keyframes {
2
    from {
3

4
    }
5
    50% {
6

7
    }
8
    to {
9

10
    }
11
}

应用#

格式：

1
.element {
2
    animation: name(名称) duration(动画时间) timing-function(速度曲线) fill-mode(等待或者停止时显示的样式) delay(延迟时间) iteration-count(动画播放次数);
3
    animation-play-state(动画暂停或者播放): ;
4
}

写法：

animation-play-state要单独写（**例：**不要直接使用animation: paused;进行暂停）

animation属性值需要按照顺序摆放，如果有不需要的直接不写即可

`animation`进度条#

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>进度条动画</title>
6
    <style>
7
      .progressContainer {
8
        margin: 20px auto;
9
        width: 600px;
10
        height: 20px;
11
        background-color: grey;
12
        border-radius: 20px;
13
      }
14
      .progressBar {
15
        /* width: 200px; */
16
        height: 20px;
17
        background-color: green;
18
        border-radius: 20px;
19
        animation: fill 3s ease-in-out infinite;
20
      }
21
      @keyframes fill {
22
        0% {
23
          width: 0;
24
        }
25
        100% {
26
          width: 600px;
27
        }
28
      }
29
    </style>
30
  </head>
31
  <body>
32
    <div class="progressContainer">
33
      <div class="progressBar"></div>
34
    </div>
35
  </body>
36
</html>