6.1 @keyframes 规则
CSS 动画 让你用最小的努力创造复杂和流畅的视觉效果。创建 CSS 动画的主要工具就是 @keyframes 规则，
它定义了动画的关键帧和每一帧中应该发生的样式变化。
@keyframes 规则用于创建动画，定义动画执行的不同阶段的 CSS 属性变化。关键帧定义了动画过程中在特定时间点要应用的样式。
语法 1：
@keyframes animation-name {
from {
/* 初始样式 */
}
to {
/* 最终样式 */
}
}
语法 2：
@keyframes animation-name {
0% {
/* 初始样式 */
}
100% {
/* 最终样式 */
}
}
其中:
from对应动画时间的0%to对应动画时间的100%
示例: 平滑改变背景颜色
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Animation Example</title>
<style>
@keyframes changeColor {
from {
background-color: lightblue;
}
to {
background-color: lightcoral;
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: changeColor 3s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Hover over me!</div>
</body>
</html>
解释:
@keyframes changeColor规则定义了一个将元素背景色从lightblue改为lightcoral的动画- 元素
.animated-box上的animation属性指出changeColor动画应持续 3 秒并无限重复
6.2 多个关键帧
你可以使用多个关键帧，通过为中间状态定义样式来创建更复杂的动画。
示例：带颜色变化的对角线移动
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Keyframes Example</title>
<style>
@keyframes moveAndChangeColor {
0% {
background-color: lightblue;
transform: translate(0, 0);
}
50% {
background-color: lightgreen;
transform: translate(100px, 100px);
}
100% {
background-color: lightcoral;
transform: translate(200px, 0);
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: moveAndChangeColor 5s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Watch me move!</div>
</body>
</html>
解释:
@keyframes moveAndChangeColor 规则定义了一个在三个阶段中改变元素背景色和位置的动画。
- 在动画的 0% 时，元素是浅蓝色并处于初始位置
- 在动画的 50% 时，元素是浅绿色并移动 100 像素向右和向下
- 在动画的 100% 时，元素是浅珊瑚色并向右移动 200 像素
6.3 简单动画示例
示例 1: 脉动效果
创建脉动效果，元素平滑地放大和缩小。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsing Effect</title>
<style>
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulse-box {
width: 150px;
height: 150px;
background-color: lightpink;
animation: pulse 2s infinite;
}
</style>
</head>
<body>
<div class="pulse-box">Pulsing</div>
</body>
</html>
解释:
@keyframes pulse规则定义了一个将元素放大到 120% 然后返回到原始大小的动画- 元素
.pulse-box上的animation属性指出pulse动画应持续 2 秒并无限重复
示例 2: 旋转
创建一个元素连续旋转的效果：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Effect</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-box {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: rotate 3s infinite linear;
}
</style>
</head>
<body>
<div class="rotate-box">Rotating</div>
</body>
</html>
解释:
@keyframes rotate规则定义了一个将元素从 0 度旋转到 360 度的动画-
元素
.rotate-box上的animation属性指出rotate动画应持续 3 秒， 无限重复并以恒定速度 (linear) 进行
GO TO FULL VERSION