轻松掌握 CSS3 动画：从一个栗子开始

在网页设计的世界中，CSS3 动画为我们打开了一扇创造精彩视觉效果的大门。让我们从一个简单的栗子开始，逐步探索 CSS3 动画的神奇之处。

想象一下，我们有一个按钮，当用户鼠标悬停时，它会优雅地旋转并改变颜色。这就是一个典型的 CSS3 动画应用场景。我们来创建这个按钮的 HTML 结构：

<button class="animated-button">点击我</button>

接下来，在 CSS 中为其定义样式：

.animated-button {
  background-color: blue;
  color: white;
  padding: 15px 30px;
  border: none;
  cursor: pointer;
}

.animated-button:hover {
  animation: rotateAndColorChange 1s ease-in-out;
}

@keyframes rotateAndColorChange {
  0% {
    transform: rotate(0deg);
    background-color: blue;
  }
  50% {
    transform: rotate(180deg);
    background-color: purple;
  }
  100% {
    transform: rotate(360deg);
    background-color: red;
  }
}

在上述代码中，@keyframes 规则定义了动画的关键帧。从 0% 到 100%，我们设置了按钮的旋转角度和背景颜色的变化。通过 animation 属性将动画应用到鼠标悬停状态。

CSS3 动画的强大之处不仅在于可以实现简单的元素变形和颜色变化，还可以创建复杂的过渡效果，如缩放、平移、淡入淡出等。

例如，要实现一个元素从左向右平滑移动的动画，可以这样定义：

@keyframes moveFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

然后将其应用到相应的元素上。

掌握 CSS3 动画需要不断地实践和尝试。从简单的例子入手，逐渐深入了解动画的各种属性和参数，您将能够为您的网页增添更多生动和吸引人的效果。

通过这个栗子，您是否对 CSS3 动画有了初步的认识和兴趣呢？赶紧动手尝试，创造属于您自己的精彩动画效果吧！