动画（animation）

# CSS 动画入门教程

## 前言

CSS 动画是一种非常酷炫的功能，它允许你为网页元素添加动态效果，如淡入淡出、旋转、缩放等。在现代网页设计中，动画可以大大提升用户体验，使页面更加生动和吸引人。

## 基础知识

CSS 动画是通过 `@keyframes` 规则和 `animation` 属性来实现的。

### @keyframes 规则

`@keyframes` 规则定义了一系列关键帧（keyframes），这些关键帧定义了动画的起始状态和结束状态。

```css
@keyframes myAnimation {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
```

### animation 属性

`animation` 属性用于应用 `@keyframes` 规则到元素上。

```css
.element {
  animation: myAnimation 2s forwards;
}
```

这里的 `myAnimation` 是上面定义的 `@keyframes` 规则的名称，`2s` 是动画的持续时间，`forwards` 关键字确保动画结束后保持最后一帧的状态。

## 动画演示

下面是一个简单的动画演示例子。

HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="animated-box">
  <h1>Hello, World!</h1>
</div>

</body>
</html>
```

CSS:
```css
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.animated-box {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 100px;
  border-radius: 5px;
  position: relative;
}

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

.animated-box {
  animation: spin 2s infinite linear;
}
```

在这个例子中，`.animated-box` 元素会不断地旋转。`infinite` 关键字使动画无限循环，`linear` 表示动画以恒定的速度进行。

## 总结

CSS 动画是一个强大的工具，它可以用来创建各种视觉效果。通过 `@keyframes` 规则和 `animation` 属性，你可以轻松地为你的网页添加动态元素。记住，动画不应该只是为了炫技而使用，而是应该为了提升用户体验和内容传达而合理使用。

动画（animation）

目录