CSS3为前端开发者提供了不依赖JavaScript即可实现视觉动效的能力。理解这些基础方法，能帮助我们在表单、按钮、卡片等元素上快速增加交互反馈。下面通过一个具体案例，拆解两种最常用的CSS3动画实现思路。
一、使用transition实现悬停过渡
transition用于定义元素在状态变化时的过渡效果，例如从默认样式切换到悬停样式。它适合简单的单向变化，比如颜色渐变、尺寸放大。其底层原理是浏览器在属性值改变时，按照设定的时长和曲线自动插入中间帧。
我们以一个按钮为例，希望鼠标移上去时，按钮在零点三秒内放大并改变背景色。代码如下：
/* 定义按钮基础样式 */
.btn {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 4px;
/* 声明过渡：属性 时长 速度曲线 延迟 */
transition: background-color 0.3s ease, transform 0.3s ease;
}
/* 悬停时改变样式 */
.btn:hover {
background-color: #e74c3c;
transform: scale(1.1);
}
上述代码中，transition写在基础类里，表示当任意匹配属性发生变化时启用过渡。若只写transition: all 0.3s，虽简便但性能略差，因为浏览器要监听所有属性。明确列出属性名是更优实践。
这种方式的优点是声明简单、易于维护；缺点是只能处理开始与结束两个状态，无法控制中间复杂序列。如果需求仅是悬停反馈，transition足够且高效。
二、使用@keyframes创建多步动画
当动画包含多个阶段，或需要在页面加载后自动循环播放时，应使用@keyframes。它允许我们定义从0%到100%的任意关键帧，浏览器会补全中间的插值。
下面改造按钮，让它在加载后自动做呼吸效果：先缩小再放大并循环。HTML结构只需一个按钮，CSS如下：
/* 定义关键帧动画 */
@keyframes breathe {
0% {
transform: scale(1);
background-color: #3498db;
}
50% {
transform: scale(1.15);
background-color: #e74c3c;
}
100% {
transform: scale(1);
background-color: #3498db;
}
}
/* 应用动画到元素 */
.breathe-btn {
padding: 10px 20px;
color: #fff;
border: none;
border-radius: 4px;
animation: breathe 2s ease-in-out infinite;
}
在@keyframes内部，百分比表示动画时间进度。infinite关键字使动画无限循环。通过修改ease-in-out，可调整速度感受。此方案比transition灵活，但代码量稍多。
需要注意，频繁使用transform和opacity做动画可避免重排，仅触发合成层，流畅度更好。避免对width、height做关键帧动画，那会引发布局重算。
三、两种方法的选用对比
实际项目中，悬停、聚焦等用户触发的两态变化，优先用transition；自动播放、多阶段或循环动效，使用@keyframes。二者可组合，例如在animation结束后用transition处理悬停。
| 对比维度 | transition | @keyframes |
|---|---|---|
| 触发方式 | 状态变化触发 | 页面加载或手动调用 |
| 阶段控制 | 仅起止两态 | 多关键帧 |
| 循环支持 | 不支持 | 支持infinite |
表中归纳了核心差异。初学者可先从transition入手，再逐步在案例中引入@keyframes，便能应对绝大多数简单动画场景。
四、完整可运行案例
将以下代码保存为html文件，即可看到按钮同时具备悬停放大与自动呼吸效果。注意在代码块中，HTML标签已被转义展示，实际文件里应使用正常标签。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.box {
padding: 12px 24px;
background: #3498db;
color: #fff;
border: none;
border-radius: 4px;
transition: transform 0.3s ease;
animation: breathe 2s ease-in-out infinite;
}
.box:hover {
transform: scale(1.2);
}
@keyframes breathe {
0% { background: #3498db; }
50% { background: #e74c3c; }
100% { background: #3498db; }
}
</style>
</head>
<body>
<button class="box">点击我</button>
</body>
</html>
这个案例融合了前面提到的技术点：animation负责循环变色，transition负责悬停缩放。通过观察效果，能直观理解CSS3动画的声明式特征。
总体来看，CSS3动画降低了动效开发门槛。只要理清transition与@keyframes的职责边界，配合transform等高性能属性，就能用极少代码改善用户体验。
CSS3动画@keyframestransition修改时间：2026-08-08 03:39:26