CSS动画效果全攻略：理论与实践案例详解

CSS动画是网页设计中的一种重要技术，它可以让你的网页更生动、更吸引人。

本文将介绍CSS动画的基本知识，并通过实践案例进行详解。

一、CSS动画基础

在CSS3中，我们可以通过transition和animation两种方式来创建动画。

transition可以在一定时间内平滑地改变CSS属性的值，它需要指定四个参数：需要变化的CSS属性，过渡的持续时间，过渡的速度曲线，和过渡的延迟时间。

animation则更加强大，它可以定义一系列的关键帧，每个关键帧都有自己的CSS样式。然后，动画会在指定的时间内按照关键帧的样式进行变化。

二、案例一：使用transition实现按钮悬浮效果

下面我们通过一个简单的例子来演示如何使用transition创建动画。在这个例子中，我们将创建一个按钮，当鼠标悬浮在按钮上时，按钮的背景色和字体色将平滑地变化。

HTML代码：

<button class="hover-button">Hover me!</button>

CSS代码：

.hover-button {
  background-color: blue;
  color: white;
  transition: background-color 0.5s ease, color 0.5s ease;
}

.hover-button:hover {
  background-color: white;
  color: blue;
}

在上面的代码中，我们使用了transition属性来指定当背景色和字体色变化时，过渡的持续时间为0.5秒，过渡的速度曲线为ease。

三、案例二：使用animation创建加载动画

下面我们来看一个更复杂的例子，我们将使用animation来创建一个加载动画。

HTML代码：

<div class="loader"></div>

CSS代码：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid blue;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

在上面的代码中，我们定义了一个名为spin的关键帧动画，它从0度旋转到360度。

然后，我们将这个动画应用到.loader元素上，动画的持续时间为2秒，速度曲线为linear，并且动画会无限次重复。

通过掌握CSS动画的基本知识，并通过实践来熟悉其使用方法，你可以创建出各种各样的动画效果，让你的网页更加生动有趣。