CSS3 动画是网页设计中的一项重要技术，它允许开发者通过简单的代码实现丰富的动画效果。以下是一些 CSS3 动画的基本概念和示例。

动画类型

CSS3 动画主要分为以下几种类型：

  • 过渡（Transitions）：用于实现简单的状态变化，如元素尺寸、透明度等。
  • 关键帧动画（Keyframe Animations）：通过定义一系列关键帧来创建复杂的动画效果。
  • 变形（Transforms）：用于改变元素的形状、大小、位置等。

示例

以下是一个简单的 CSS3 过渡动画示例：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}

div:hover {
  width: 200px;
}

这段代码定义了一个红色方块，当鼠标悬停在方块上时，方块宽度会逐渐变为 200px。

扩展阅读

想要了解更多关于 CSS3 动画的知识，可以阅读以下文章：

CSS3 动画示例