CSS Animation 属性详解
CSS Animation 属性用于创建复杂的动画效果，而不需要使用 JavaScript。下面我将详细介绍如何使用这个强大的功能。
1. 基本概念
CSS Animation 由两部分组成：
- @keyframes：定义动画序列
- animation 属性：将动画应用到元素上
2. 定义关键帧动画 (@keyframes)
@keyframes 规则定义了动画在不同时间点的样式变化。
css
/* 方法1：使用百分比 */
@keyframes slide-in {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
/* 方法2：使用 from 和 to */
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}3. Animation 子属性详解
3.1 animation-name - 动画名称
指定要应用的 @keyframes 动画名称。
css
.element {
animation-name: slide-in;
}3.2 animation-duration - 动画时长
定义动画完成一个周期所需的时间。
css
.element {
animation-duration: 2s; /* 2秒 */
animation-duration: 500ms; /* 500毫秒 */
}3.3 animation-timing-function - 时间函数
控制动画的速度曲线。
css
.element {
/* 预定义的值 */
animation-timing-function: ease; /* 默认，慢-快-慢 */
animation-timing-function: linear; /* 匀速 */
animation-timing-function: ease-in; /* 慢开始 */
animation-timing-function: ease-out; /* 慢结束 */
animation-timing-function: ease-in-out; /* 慢开始和结束 */
/* 使用贝塞尔曲线 */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* 阶梯函数 */
animation-timing-function: steps(4, jump-start);
}3.4 animation-delay - 动画延迟
定义动画开始前的延迟时间。
css
.element {
animation-delay: 1s; /* 1秒后开始 */
animation-delay: -1s; /* 立即开始，但跳过前1秒 */
}3.5 animation-iteration-count - 迭代次数
定义动画播放的次数。
css
.element {
animation-iteration-count: 1; /* 播放1次（默认） */
animation-iteration-count: 3; /* 播放3次 */
animation-iteration-count: infinite; /* 无限循环 */
animation-iteration-count: 2.5; /* 播放2.5次 */
}3.6 animation-direction - 动画方向
定义动画播放的方向。
css
.element {
animation-direction: normal; /* 正常播放（默认） */
animation-direction: reverse; /* 反向播放 */
animation-direction: alternate; /* 正常和反向交替 */
animation-direction: alternate-reverse; /* 反向开始交替 */
}3.7 animation-fill-mode - 填充模式
定义动画在执行前后如何应用样式。
css
.element {
animation-fill-mode: none; /* 不应用任何样式（默认） */
animation-fill-mode: forwards; /* 保持最后一帧的样式 */
animation-fill-mode: backwards; /* 应用第一帧的样式（包括延迟期间） */
animation-fill-mode: both; /* 同时应用forwards和backwards */
}3.8 animation-play-state - 播放状态
控制动画是否正在运行或暂停。
css
.element {
animation-play-state: running; /* 正在播放（默认） */
animation-play-state: paused; /* 暂停 */
}
/* 通过:hover暂停动画 */
.element:hover {
animation-play-state: paused;
}4. 简写属性 animation
animation 属性是以上所有属性的简写形式。
css
.element {
/* 语法：name duration timing-function delay iteration-count direction fill-mode play-state */
animation: slide-in 2s ease-in-out 1s infinite alternate both;
/* 多个动画 */
animation:
slide-in 2s ease-in-out,
fade-in 1s ease-out 0.5s;
}5. 完整示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 定义关键帧动画 */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
}
@keyframes color-change {
0% {
background-color: #ff6b6b;
}
50% {
background-color: #4ecdc4;
}
100% {
background-color: #45b7d1;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 应用动画 */
.box {
width: 100px;
height: 100px;
margin: 50px auto;
border-radius: 10px;
background-color: #ff6b6b;
/* 应用多个动画 */
animation:
bounce 2s ease-in-out infinite,
color-change 4s ease-in-out infinite alternate,
rotate 8s linear infinite;
}
/* 悬停暂停动画 */
.box:hover {
animation-play-state: paused;
}
/* 另一个示例：卡片进入动画 */
.card {
width: 200px;
padding: 20px;
margin: 20px auto;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
opacity: 0;
transform: translateY(50px);
animation: card-entrance 0.8s ease-out forwards;
}
.card:nth-child(2) {
animation-delay: 0.2s;
}
.card:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes card-entrance {
0% {
opacity: 0;
transform: translateY(50px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
</style>
</head>
<body>
<h2>动画示例</h2>
<div class="box"></div>
<div class="card">
<h3>卡片1</h3>
<p>这是一个带入场动画的卡片</p>
</div>
<div class="card">
<h3>卡片2</h3>
<p>延迟0.2秒显示</p>
</div>
<div class="card">
<h3>卡片3</h3>
<p>延迟0.4秒显示</p>
</div>
</body>
</html>6. 性能优化建议
-
优先使用 transform 和 opacity
- 这些属性可以由GPU加速，性能更好
- 避免动画中使用 width、height、margin 等会触发重排的属性
-
使用 will-change
css.animated-element { will-change: transform, opacity; } -
减少动画数量
- 过多同时运行的动画会影响性能
-
使用适当的 timing-function
- 某些缓动函数（如 steps()）可能更耗费性能
7. 浏览器兼容性
大多数现代浏览器都支持CSS Animation。如果需要支持旧版浏览器，可以添加前缀：
css
@-webkit-keyframes slide-in { /* ... */ }
@keyframes slide-in { /* ... */ }
.element {
-webkit-animation: slide-in 2s;
animation: slide-in 2s;
}8. 调试技巧
-
使用浏览器开发者工具：
- Chrome DevTools → Elements → Animations 面板
- 可以查看、编辑和调试动画
-
使用 JavaScript 控制动画：
javascript// 获取动画 const animations = element.getAnimations(); // 暂停/继续 element.style.animationPlayState = 'paused'; element.style.animationPlayState = 'running';
CSS Animation 是一个非常强大的工具，通过组合不同的属性可以创建出丰富多样的动画效果。建议多实践，尝试不同的参数组合，以掌握其精髓。