CSS3 动画（Animation）是另一种使网页元素产生动态效果的方法，比过渡更为强大和灵活。通过 CSS 动画，你可以让元素从一个状态过渡到另一个状态，并且在动画过程中进行多次变化。
1. 基本语法
CSS3 动画使用 @keyframes 来定义动画，并通过 animation 属性来应用动画效果。
@keyframes animation-name {
from {
/* 初始状态 */
property: value;
}
to {
/* 结束状态 */
property: value;
}
}2. 定义动画
在 CSS 中，@keyframes 用于定义动画的关键帧。每个关键帧规定了动画某一时刻元素的样式。
@keyframes moveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}这个例子定义了一个名为 moveRight 的动画，元素会从当前位置平滑地向右移动 300px。
3. 应用动画
要使用动画，我们可以通过 animation 属性将动画应用到某个元素上。
div {
width: 100px;
height: 100px;
background-color: #3498db;
animation: moveRight 2s ease-in-out infinite;
}这里，animation 属性的值有几个部分：
- animation-name：动画的名称（这里是
moveRight）。 - animation-duration：动画的持续时间（例如：
2s表示 2 秒）。 - animation-timing-function：定义动画的速度曲线（例如：
ease-in-out）。 - animation-iteration-count：动画的循环次数（例如：
infinite表示无限循环）。
4. 动画的属性
CSS 动画有很多控制属性，以下是常用的几个：
- animation-name：指定应用的动画名称。
- animation-duration：动画的持续时间。
- animation-timing-function：动画的加速曲线，常用的值有
linear,ease,ease-in,ease-out,ease-in-out。 - animation-delay：设置动画开始前的延迟时间。
- animation-iteration-count：指定动画的播放次数，
infinite表示无限次播放。 - animation-direction：定义动画的播放方向。常见值有：
normal：按顺序播放（默认）。reverse：反向播放。alternate：每次播放完一轮后反向播放。alternate-reverse：每次播放完一轮后反向播放，但顺序与reverse相反。- animation-fill-mode：指定动画在执行完毕后，元素的状态。常用值有：
forwards：保持动画结束时的状态。backwards：在动画开始前，元素使用关键帧的初始样式。both：结合forwards和backwards。
5. 简单动画示例
让我们来看一个简单的动画示例，定义一个按钮的平移动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 动画</title>
<style>
@keyframes moveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
button {
width: 100px;
height: 50px;
background-color: #3498db;
color: white;
border: none;
font-size: 16px;
cursor: pointer;
animation: moveRight 2s ease-in-out infinite;
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>这个例子中，按钮会在 2 秒内平滑地向右移动 200px，并且这个动画会一直循环。
6. 多个关键帧（Keyframes）
@keyframes 允许你定义多个关键帧，创建更复杂的动画效果。例如，让一个元素先变大，然后变小，最后恢复原样：
@keyframes scaleUpDown {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
div {
width: 100px;
height: 100px;
background-color: #3498db;
animation: scaleUpDown 3s ease-in-out infinite;
}7. 动画组合
你可以将多个动画效果组合到一个元素上，定义多个 @keyframes 和 animation 属性。例如：
@keyframes moveAndFade {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(300px);
opacity: 0;
}
}
div {
width: 100px;
height: 100px;
background-color: #3498db;
animation: moveAndFade 3s ease-in-out infinite;
}这个例子中，元素会在 3 秒内平滑地向右移动，并且渐渐变透明。
8. 使用动画与过渡的结合
过渡和动画可以组合使用，制作更丰富的效果。例如，当鼠标悬停时，元素不仅变化颜色，还可以增加动画效果。
@keyframes moveUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50px);
}
}
div {
width: 200px;
height: 200px;
background-color: #3498db;
transition: background-color 0.3s;
}
div:hover {
background-color: #2ecc71;
animation: moveUp 0.5s forwards;
}在这个例子中，div 元素会在悬停时先变化背景颜色，然后向上平移。
综合实例：按钮点击时的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 动画</title>
<style>
@keyframes clickEffect {
0% {
transform: scale(1);
background-color: #3498db;
}
50% {
transform: scale(1.2);
background-color: #2ecc71;
}
100% {
transform: scale(1);
background-color: #3498db;
}
}
button {
width: 150px;
height: 50px;
background-color: #3498db;
color: white;
border: none;
font-size: 16px;
cursor: pointer;
animation: none;
}
button:active {
animation: clickEffect 0.3s ease;
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>在这个例子中，按钮在点击时会先放大并改变颜色，然后恢复原状。
总结
CSS3 动画提供了一种强大且灵活的方式来创建动态效果，不需要 JavaScript 参与即可实现丰富的动画效果。通过 @keyframes 定义多个关键帧，配合 animation 属性，你可以控制动画的行为、时间、延迟、重复次数等，创建出各种动感十足的页面效果。