基于CSS3特效之动画:animation的应用

我来详细讲解“基于CSS3特效之动画:animation的应用”的完整攻略，过程中将包含两条示例说明。

什么是CSS3动画

CSS3动画是指，利用CSS3定义的一系列动画属性和@keyframes规则来实现的动态效果。CSS3动画可以实现从一个状态到另一个状态的平滑过渡，从而让网页看起来更加生动、更有吸引力。

实现CSS3动画的基本步骤

定义动画关键帧

在CSS3中，动画是通过@keyframes规则来定义的。@keyframes规则中可以定义动画的关键帧（即动画的起点和终点），以及动画在关键帧之间的变化过程。

下面是一个简单的CSS3动画的例子，它通过@keyframes规则来定义动画的关键帧：

@keyframes example {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}

在上面的代码中，@keyframes规则定义了一个名为example的动画，它包含两个关键帧：0%和100%。在0%关键帧中，元素的不透明度（opacity）为0；在100%关键帧中，元素的不透明度为1。因此，这个动画会使元素从完全透明的状态逐渐变为完全不透明的状态。

应用动画关键帧到元素

要应用一个CSS3动画到元素上，可以使用animation属性。animation属性有以下几个值：

• animation-name：指定动画的名称，即@keyframes规则的名称；
• animation-duration：指定动画的持续时间，单位可以是秒（s）或毫秒（ms）；
• animation-delay：指定动画的延迟时间，即动画开始播放的时间点，单位可以是秒（s）或毫秒（ms）；
• animation-direction：指定动画的播放方向，默认值是normal，表示从头到尾播放；如果取值为alternate，表示交替反向播放；
• animation-timing-function：指定动画的时间函数，即动画播放过程中的速度曲线；
• animation-iteration-count：指定动画的播放次数，可以是一个数字，也可以是infinite，表示无限次；
• animation-fill-mode：指定动画播放前后的状态，可以是none（默认值）、forwards、backwards或both。

下面是一个应用了上面定义的example动画的元素的例子：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

在上面的代码中，一个宽高均为100像素、背景颜色为红色的div元素应用了example动画。该动画的持续时间为2秒，延迟1秒播放，播放方向为交替反向，时间函数为ease，播放次数为无限次，播放前后保持最终状态。

示例1：实现一个彩虹光标

下面是一个实现彩虹光标的示例。

首先，我们在HTML文档中定义一个文本输入框和一个按钮：

<input type="text" id="input">

<button id="btn">
  Go
</button>

接着，我们在CSS文件中定义两个动画，分别为rainbow和wobble。rainbow动画用于实现光标的彩虹效果，wobble动画用于实现按钮的抖动效果。代码如下：

@keyframes rainbow {
  0% {
    border-color: red;
  }
  16.67% {
    border-color: orange;
  }
  33.33% {
    border-color: yellow;
  }
  50% {
    border-color: green;
  }
  66.67% {
    border-color: blue;
  }
  83.33% {
    border-color: indigo;
  }
  100% {
    border-color: violet;
  }
}
@keyframes wobble {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  25% {
    transform: translateX(-50%) rotate(5deg);
  }
  50% {
    transform: translateX(-50%) rotate(0deg);
  }
  75% {
    transform: translateX(-50%) rotate(-5deg);
  }
  100% {
    transform: translateX(-50%) rotate(0deg);
  }
}

在上面的代码中，我们定义了两个关键帧动画rainbow和wobble。rainbow动画通过改变光标的边框颜色实现彩虹效果；wobble动画通过改变按钮的旋转角度实现抖动效果。

最后，我们将上述动画应用于输入框和按钮上，代码如下：

#input:focus {
  border: 2px solid;
  animation: rainbow 2s ease infinite;
}
#btn {
  margin-top: 20px;
  animation: wobble 2s ease-in-out infinite;
}

在上面的代码中，我们通过:focus伪类选择器实现了输入框获得焦点时触发光标彩虹效果；通过animation属性实现了按钮的抖动效果。

示例2：实现一个旋转的图形

下面是一个实现旋转的图形的示例。

首先，在HTML文档中定义一个div元素：

<div id="rotate"></div>

接着，在CSS文件中定义一个关键帧动画rotate，代码如下：

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

在上面的代码中，我们定义了一个关键帧动画rotate，用于实现元素旋转360度的效果。

最后，我们将动画应用于上面定义的div元素上，代码如下：

#rotate {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s linear infinite;
}

在上面的代码中，我们通过设置width、height和background-color属性定义了一个宽高均为100像素、背景颜色为红色的div元素；通过animation属性设置了动画名称为rotate，持续时间为2秒，时间函数为linear，无限循环。这样，我们就完成了一个旋转的图形效果。

以上就是基于CSS3特效之动画animation的应用的完整攻略。