📅 最后修改于: 2023-12-03 15:00:08.306000 🧑 作者: Mango
CSS 可以创建简单的 2D 动画，包括平移、旋转、缩放和扭曲等效果。在本文中，我们将一步步学习如何使用纯 CSS 创建 2D 动画。
在开始编写 CSS 动画之前，我们需要准备一些素材：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 2D 动画</title>
</head>
<body>
<div class="box"></div>
</body>
</html>
我们只需要一个空的 div 元素，它将作为动画的目标元素。
.box {
width: 100px;
height: 100px;
background-color: red;
}
这是最简单的 CSS 样式，我们可以看到一个红色矩形，它将作为动画的目标。
平移动画是最基本的 CSS 动画之一，它可以让元素从一个地方移动到另一个地方。下面是一个简单的例子：
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 2s linear forwards;
}
@keyframes move {
from {
left: 0;
}
to {
left: 200px;
}
}
我们给 .box 添加了一个 position: relative 的样式，这是因为我们要在后面的动画中使用 left 属性进行移动。接下来，我们创建了一个名为 move 的动画，它从左侧开始，持续 2 秒，使用线性的缓动函数，直到最后停止在目标点。
最后，我们需要在动画定义中使用 forwards 属性，它会使元素在动画结束时停留在最后一个关键帧上。
旋转动画可以让元素绕自身旋转。下面是一个简单的例子：
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 50px;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
我们给 .box 添加了一个 margin: 50px 的样式，这是为了让元素与页面边缘产生一定距离。接下来，我们创建了一个名为 rotate 的动画，它从初始状态开始，持续 2 秒，使用线性的缓动函数，一直旋转下去。
缩放动画可以让元素变大或变小。下面是一个简单的例子：
.box {
width: 100px;
height: 100px;
background-color: red;
animation: scale 2s linear alternate infinite;
}
@keyframes scale {
from {
transform: scale(1);
}
to {
transform: scale(1.5);
}
}
我们创建了一个名为 scale 的动画，它从初始状态开始，持续 2 秒，使用线性的缓动函数，交替进行缩放。
扭曲动画可以让元素变形。下面是一个简单的例子：
.box {
width: 100px;
height: 100px;
background-color: red;
animation: skew 2s linear alternate infinite;
}
@keyframes skew {
from {
transform: skewX(0deg) skewY(0deg);
}
to {
transform: skewX(30deg) skewY(10deg);
}
}
我们创建了一个名为 skew 的动画，它从初始状态开始，持续 2 秒，使用线性的缓动函数，交替进行扭曲。
本文介绍了 CSS 如何一次制作 2D 动画，涉及到了平移、旋转、缩放和扭曲等基本动画效果。通过这些示例，我们可以了解到如何使用 CSS 动画创建出酷炫的动态效果。