CSS3 动画

CSS3动画是网页设计中一个非常有趣且强大的功能，它能够为网页添加丰富的视觉效果，提升用户体验。在本教程中，我们将学习如何使用CSS3动画来创建各种动态效果。

一、CSS3动画基础

CSS3动画主要通过@keyframes规则来创建。这个规则允许我们定义一个动画的多个关键帧，然后通过将这个动画应用到HTML元素上，实现动态效果。

1. 创建关键帧

关键帧定义了动画的起始和结束状态，以及中间过渡状态。在@keyframes规则中，我们使用百分比来定义关键帧。例如：

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

上述代码定义了一个名为“example”的动画，该动画将在0%时背景色为红色，50%时背景色为蓝色，100%时背景色为绿色。

2. 应用动画到元素

创建了关键帧后，我们需要将这个动画应用到HTML元素上。通过使用animation属性，我们可以将动画名称、持续时间、延迟、迭代次数等参数应用到元素上。例如：

div {
  animation: example 3s ease-in-out infinite;
}

上述代码将“example”动画应用到<div>元素上，动画持续时间为3秒，使用ease-in-out缓动函数，infinite 指定动画的播放方式为循环播放。

二、CSS3动画属性

CSS3动画有很多属性可以用来控制动画效果，下面是一些常用的属性：

1. animation-name：用于指定动画的名称。
2. animation-duration：用于指定动画的持续时间。
3. animation-timing-function：用于指定动画的速度曲线，例如ease、linear、ease-in、ease-out、ease-in-out等。
4. animation-delay：用于指定动画的延迟时间。
5. animation-iteration-count：用于指定动画的迭代次数。
6. animation-direction：用于指定动画的播放方向，例如normal、reverse、alternate、alternate-reverse等。
7. animation-fill-mode：用于指定动画在元素结束时的样式，例如none、forwards、backwards、both等。

三、CSS3动画示例

下面是一个简单的CSS3动画示例，展示了如何创建一个闪烁的星星效果：

HTML代码：

<div class="star"></div>

CSS代码：

.star {
  width: 100px;
  height: 100px;
  background-color: gold;
  position: relative;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% {opacity: 1;}
  50% {opacity: 0;}
}

上述代码创建了一个星星形状的div元素，并使用CSS3动画使其闪烁。通过调整关键帧和属性值，我们可以创建各种有趣的动态效果。

本文地址：https://www.tides.cn/p_docs-css3-animation