CSS 动画 – 让元素栩栩如生

第 13 讲：css 动画 – 让元素栩栩如生

欢迎来到《从基础到辉煌》课程第13讲！在这篇文章中，我们将探索 css 动画——一种通过随着时间的推移为网页元素添加动画效果的强大方法。借助 css 动画，您可以创建流畅的动态效果，从而增强用户体验和参与度。

1. css 动画概述

css 动画允许元素在定义的时间内在不同样式之间转换。您可以使用两个关键属性来控制动画的工作方式：

• @keyframes：定义动画在特定时刻的行为。
• 动画：将动画应用于元素并控制其时间和持续时间。

2. @keyframes 规则

@keyframes 规则指定元素在动画过程中不同点应具有的样式。您可以以不同的百分比定义关键帧（0% 为开始，100% 为结束）。

• 示例：更改背景颜色的基本关键帧动画。

  @keyframes changecolor {
    0% {
      background-color: red;
    }
    100% {
      background-color: blue;
    }
  }

在此示例中：

立即学习“前端免费学习笔记（深入）”；

• 背景颜色会随着动画的进行逐渐从红色变为蓝色。

3.使用动画属性应用动画

要将动画应用到元素，可以使用animation 属性。该属性需要几个键值：

• 名称：关键帧动画的名称（例如，changecolor）。
• 持续时间：动画应运行多长时间（例如，2 秒为 2 秒）。
• 计时函数：动画的速度曲线（例如，缓动、线性）。

• 延迟：开始动画之前等待多长时间。

• 示例：将动画应用于元素。
  

  .box {
    animation: changecolor 2s ease-in-out infinite;
  }

在这种情况下：

• .box 元素将在 2 秒内从红色变为蓝色，遵循缓入曲线，并且动画将无限重复。

4.动画计时函数

计时函数控制动画如何随时间进展。一些常见的计时功能包括：

• 线性：动画以恒定速度进行。
• ease：动画开始缓慢，加速，然后减慢。
• ease-in：动画开始缓慢并加速。

• ease-out：动画开始时快，然后减慢。

• 示例：应用不同的计时函数。
  

  .box {
    animation: changecolor 3s linear;
  }

这里：

• 动画将以恒定速度进行，需要 3 秒才能完成。

5.动画迭代和延迟

您可以使用animation-iteration-count属性控制动画重复的次数。您还可以使用animation-delay来延迟动画的开始。

• 示例：重复 3 次并在 1 秒延迟后开始的动画。

  .box {
    animation: changecolor 2s ease-in 3;
    animation-delay: 1s;
  }

在这种情况下：

• 动画将在页面加载后 1 秒开始并重复 3 次。

6.动画填充模式

animation-fill-mode 属性定义元素在动画之前和之后的外观。常见值包括：

• none：动画结束后元素返回到原始状态。
• forwards：元素保留动画的最终状态。

• 向后：元素在动画开始之前呈现初始状态。

• 示例：保持动画后的最终状态。
  

  .box {
    animation: changecolor 2s ease forwards;
  }

这里：

• 动画完成后元素将保持蓝色，而不是恢复为红色。

7.多个动画

您可以将多个动画应用到一个元素，用逗号分隔它们。

• 示例：对颜色和位置进行动画处理。

  @keyframes movebox {
    0% {
      transform: translatex(0);
    }
    100% {
      transform: translatex(100px);
    }
  }

  .box {
    animation: changecolor 2s ease, movebox 2s ease-in-out;
  }

在这种情况下：

• .box 将改变颜色并同时向右移动 100px。

8.浏览器支持和前缀属性

虽然现代浏览器支持 css 动画，但为旧版本浏览器添加供应商前缀始终是个好主意。

• 示例：添加供应商前缀。

  .box {
    -webkit-animation: changeColor 2s ease;
    -moz-animation: changeColor 2s ease;
    animation: changeColor 2s ease;
  }

这确保了不同浏览器之间的兼容性。

练习运动

1. 使用@keyframes创建弹跳球动画，使球平滑地上下移动。
2. 向图像添加动画，使其在悬停时旋转 360 度。

下一步： 在下一课中，我们将探索 css 转换，它允许您平滑地对 css 属性的变化进行动画处理。您将学习如何创建引人入胜的悬停效果和其他增强用户体验的交互。

在 linkedin 上关注我

里多伊·哈桑