CSS 动画 – 让元素栩栩如生

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

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

1. css 动画概述

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

2. @keyframes 规则

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

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

在此示例中：

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

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

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

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

在这种情况下：

4.动画计时函数

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

  .box {    animation: changecolor 3s linear;  }

这里：

5.动画迭代和延迟

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

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

在这种情况下：

6.动画填充模式

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

  .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;  }

在这种情况下：

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

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

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

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

练习运动

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

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

在 linkedin 上关注我

里多伊·哈桑