css donghua

CSS 动画是通过 CSS 属性来控制 HTML 元素在页面上的动态效果。常见的 CSS 动画包括过渡（transition）、关键帧动画（animation）和动画变形（transform）。其中，过渡是元素从一种状态到另一种状态的平滑过渡，关键帧动画是通过指定关键帧来定义动画的行为，动画变形则是通过对元素的位置、大小、旋转等属性进行变形来实现动画效果。

下面是一个简单的 CSS 动画示例，它会使一个元素在鼠标悬停时进行旋转和放大：

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  transition: all 0.3s ease; /* 过渡效果 */
}

.box:hover {
  transform: rotate(360deg) scale(1.2); /* 变形 */
}

在上面的代码中，我们首先定义了一个 `.box` 类，它表示一个正方形元素，并设置了它的宽度、高度和背景颜色。接着，我们使用 `transition` 属性来指定元素的过渡效果，这里我们指定了所有属性在 0.3 秒内进行平滑的过渡。最后，在 `.box:hover` 选择器中，我们使用 `transform` 属性来定义元素的变形效果，在鼠标悬停时将元素旋转 360 度并放大到原来的 1.2 倍大小。

通过组合使用不同的 CSS 属性，我们可以创建出各种各样的动画效果，例如淡入淡出、滑动、弹跳等等。