CSS3动画

发表于 | 分类于
CSS3动画

CSS3动画

CSS3 提供了多种方式来创建动画效果。

以下是 CSS3 支持的常见动画属性：

  1. transition（过渡）：通过在元素状态之间平滑过渡来实现动画效果。可以实现平滑的颜色渐变、大小调整等效果。

  2. transform（变换）：使用 2D 或 3D 转换函数改变元素的形状、大小、位置和角度。可以实现旋转、缩放、倾斜等效果。

  3. animation（动画）：通过定义关键帧来创建复杂的动画效果。可以实现更复杂、多步骤的动画，包括淡入淡出、滑动、闪烁等效果。

    配合keyframes使用。keyframes（关键帧）：定义动画中的关键状态和时间点，用于配合 animation 属性创建复杂的动画效果。

transition

transition（过渡）：通过在元素状态之间平滑过渡来实现动画效果。
示例：

1
2
3
4
5
6
7
8
9
10
11
12
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}

.box:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

transform

transform（变换）：使用 2D 或 3D 转换函数改变元素的形状、大小、位置和角度。
示例：

1
2
3
4
5
6
7
8
9
10
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 2s;
}

.box:hover {
  transform: rotate(180deg);
}

animation

animation（动画）：通过定义关键帧来创建复杂的动画效果。
示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes move_anim {
  0% { left: 0px; top: 0px; }
  50% { left: 200px; top: 200px; }
  100% { left: 400px; top: 0px; }
}

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move_anim 4s infinite;
}

停留到最后一帧

要让动画执行完毕后停止在最后一帧，可以使用 animation-fill-mode 属性。将 animation-fill-mode 设置为 forwards 可以实现这个效果。

具体实现步骤如下：

  1. 在 @keyframes 规则中定义动画的关键帧。
  2. 设置 animation-fill-mode: forwards;，确保动画执行完毕后停留在最后一帧。

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
div {
  animation-name: example;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

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

元素会根据 example 动画播放，在最后一帧（100%）时停止，并保持最终状态。

这样就实现了动画执行后停止在最后一帧的效果。

animation-fill-mode

animation-fill-mode 属性指定在动画播放之前和之后，元素应如何应用样式。

以下是 animation-fill-mode 可能的取值：

  1. none：默认值，动画不会影响动画播放之前或之后元素的样式。元素会按照动画的属性值逐渐过渡。

  2. forwards：在动画结束后，元素会应用动画的最后一个关键帧属性值，保持在最后一帧的状态。

  3. backwards：在动画播放之前（即在动画开始之前，包括延迟时间）元素将应用动画的第一个关键帧属性值，等待实际动画播放。

  4. both：同时应用 forwards 和 backwards 的效果，即在动画播放之前应用第一个关键帧属性值，在动画结束后保持最后一帧的状态。

注意，animation-fill-mode 只会影响动画播放前和播放后的状态。

动画播放期间元素会根据关键帧逐渐过渡。

示例

上移

1
2
3
4
.tabbar_item:hover {
  transform: translate(0, -20px);
  transition: all 0.2s linear;
}

放大

1
2
3
4
.content_outer:hover {
    transform: scale(1.05, 1.05);
    transition: all 0.2s ease;
}

旋转1

1
<img :class="{'rotate360':showAnimate}" @click="showAnimate=true" @animationend="showAnimate=false"></i>

对应的css

1
2
3
4
5
6
7
8
9
@keyframes rotate360 {
    100% {
        transform: rotate(360deg);
    }
}

.rotate360 {
    animation: rotate360 .5s ease-out 0s;
}

旋转2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/* 旋转动画 指定class为trun即可使用*/
.turn {
  animation: turn 10s linear infinite;
}

.turn2 {
  animation: turn2 6s linear infinite;
}

.turn3 {
  animation: turn3 10s linear infinite;
}

/*
turn : 定义的动画名称
10s : 动画时间
linear : 动画平滑
infinite :使动画无限循环
transform:rotate(旋转角度)
%0:动画开始
%100:动画结束
*/
@keyframes turn {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes turn2 {
  0% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(450deg);
  }
}

@keyframes turn3 {
  0% {
    transform: rotate(180deg);
  }

  50% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(540deg);
  }
}

淡入淡出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.turn4 {
  animation: turn4 4s linear infinite;
}

@keyframes turn4 {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

按钮悬浮渐变动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.login_btn {
  margin-top: 40px;
  width: 400px;
  height: 50px;
  position: relative;
  z-index: 1;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 5px 30px 0 rgba(3, 216, 222, 0.2);
  -moz-box-shadow: 0 5px 30px 0 rgba(3, 216, 222, 0.2);
  -webkit-box-shadow: 0 5px 30px 0 rgba(3, 216, 222, 0.2);
  -o-box-shadow: 0 5px 30px 0 rgba(3, 216, 222, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  .login_btn_bg {
    position: absolute;
    z-index: -1;
    width: 300%;
    height: 100%;
    background: #a64bf4;

    background: linear-gradient(
      to right,
      #00dbde,
      #fc00ff,
      #00dbde,
      #fc00ff
    );
    top: 0;
    left: -100%;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }

  .login_btn_bg:hover {
    left: 0;
  }

  .inner_txt {
    background: transparent;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 18px;
    pointer-events: none;
  }
}

对应的HTML

1
2
3
4
<div class="login_btn">
    <div class="login_btn_bg"></div>
    <div class="inner_txt">登 录</div>
</div>

底线滑动效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.input_outer {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 26px;
  border-bottom: 2px solid #d9d9d9;
  height: 48px;
  font-weight: bold;

  .minput {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    font-size: 16px;
    padding-left: 40px;
    padding-right: 10px;
    color: #666;
    background: transparent;
  }
}

.input_outer::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #7f7f7f;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.input_outer:hover {
  color: #a64bf4;
}
.input_outer:hover::after {
  width: 100%;
}

对应的HTML

1
2
3
4
<div class="input_outer">
    <Icon type="ios-contact-outline" />
    <input type="text" class="minput" />
</div>

速度曲线

示例

1
2
3
4
5
6
7
8
.right_div {
    transform: translateX(44rem);
    transition: all 0.4s cubic-bezier(0.95, 0.34, 0.83, 0.67);
}

.right_div.show {
    transform: translateX(0);
}

CSS3 的 transition-timing-function 属性提供了 5 个预设的速度曲线值，用于控制过渡动画的速度变化节奏，分别是：

  1. ease（默认值）
    • 效果：开始慢 → 中间快 → 结束慢（缓入缓出）
    • 适用场景：大多数常规动画，视觉上更自然，如元素 hover 效果、简单位移等。
  2. linear
    • 效果：匀速运动（速度始终保持一致）
    • 适用场景：需要匀速变化的动画，如进度条加载、匀速移动的元素等。
  3. ease-in
    • 效果：开始慢 → 逐渐加快（缓入）
    • 适用场景：强调 “启动感” 的动画，如元素从静止开始加速移动。
  4. ease-out
    • 效果：开始快 → 逐渐减慢（缓出）
    • 适用场景：强调 “减速停止” 的动画，如元素快速移动后缓慢停下。
  5. ease-in-out
    • 效果：开始慢 → 中间快 → 结束慢（比 ease 更平缓的缓入缓出）
    • 适用场景：需要对称速度变化的动画，如模态框的显示 / 隐藏、平滑滚动过渡等。

我们也可以自定义贝塞尔曲线

1
cubic-bezier(0.95, 0.34, 0.83, 0.67)

贝塞尔曲线可以在这个网址测试

https://cubic-bezier.com/#.17,.67,.83,.67