在网页开发中，动画并不是非得依赖JavaScript库才能实现。利用HTML5的语义化标签承载页面结构，再配合CSS3原生动画特性，就能写出性能良好且易于维护的动态效果。CSS3提供了transition和animation两种主要方式，前者适合简单状态切换，后者通过关键帧可以编排复杂序列。
一、HTML5结构如何为动画做准备
HTML5本身并不包含动画指令，它的价值在于给出清晰的内容容器。比如我们要让一张卡片在鼠标悬停时放大并显现，首先需要用合理的标签把卡片独立出来。使用<section>或<article>包裹，内部用<div>做视觉层，可以避免后期选择器混乱。
很多项目直接把所有元素堆在<div>里，导致CSS动画难以精准命中目标。良好的HTML5结构意味着给动画元素加上明确的class，例如class="card"，这样CSS只用写.card:hover就能控制状态，不需要层层嵌套选择。结构越简单，浏览器重排重绘的成本越低，动画自然更顺滑。
二、CSS3 transition实现基础悬停动画
transition用于在特定属性发生变化时，让变化在一段时间内完成而不是瞬间跳变。它最适合按钮变色、卡片位移这类单一状态改变。下面例子中，卡片默认缩小且半透明，悬停时恢复并放大，全部由transition驱动。
.card {
width: 200px;
height: 120px;
background: #3498db;
opacity: 0.6;
transform: scale(0.9);
/* 声明过渡：属性 时长 缓动函数 延迟 */
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.card:hover {
opacity: 1;
transform: scale(1.05);
}
上面的代码里，transform和opacity都是能被GPU加速的属性。浏览器会把卡片提到独立合成层，动画过程不触发重排。相比之下，如果过渡的是left或top，每次变化都要重新计算布局，低端机上容易掉帧。
缓动函数ease-out让动画开头快结尾慢，比linear更符合物理直觉。实际项目中，可以把transition写在基础类里，悬停只改目标值，这样多个状态切换都能复用同一套时间曲线，减少样式冗余。
三、CSS3 animation与关键帧编排
当动画需要自动播放或包含多个阶段时，就要用@keyframes定义关键帧，再用animation属性绑定。比如页面加载后卡片从下方淡入，用关键帧比transition更直观，因为它不依赖交互触发。
@keyframes cardEnter {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card-enter {
animation: cardEnter 0.8s ease-out forwards;
}
关键字forwards让动画结束后保留最后一帧状态，否则卡片会闪回初始样式。translateY同样走合成层，不会引发重排。如果动画要无限循环，比如呼吸效果，只需把animation里的iteration-count设为infinite，并定义0%、50%、100%三档关键帧控制缩放幅度。
需要注意的是，animation和transition不要同时作用于同一属性，否则容易出现时序冲突。推荐做法是进场用animation，悬停反馈用transition，职责分离后调试更轻松。
四、实战：组合出完整卡片动画
把前面两点合并，就能得到既自动进场又能交互响应的卡片。HTML部分只用一段标准HTML5结构，CSS分别处理进场与悬停，彼此不打架。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>卡片动画示例</title>
<style>
.card {
width: 220px;
height: 140px;
background: #2ecc71;
border-radius: 8px;
opacity: 0;
transform: translateY(40px);
animation: cardEnter 0.8s ease-out forwards;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.card:hover {
opacity: 1;
transform: translateY(0) scale(1.05);
}
@keyframes cardEnter {
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>
这段代码中，animation负责把卡片从下方拉回并显形，由于forwards存在，悬停前它停在终点。hover规则里再次写transform，transition会让放大幅度平滑变化。两者属性值虽都碰了transform，但动画播完才接受悬停控制，用户感知不到冲突。
如果希望多张卡片错开进场，可以给第二个卡片加animation-delay: 0.2s，无需改动关键帧。这种声明式延迟比用JS定时器更可靠，也不会因为脚本加载慢而错乱。
五、性能与常见误区
用CSS3做动画最大的优势是主线程压力小，但用错属性就前功尽弃。绝对定位元素的left、margin、width变化都会触发重排，应统一改成transform或opacity。另外，不要给过多元素同时加box-shadow过渡，模糊计算很耗GPU。
| 属性类型 | 是否触发重排 | 动画流畅度 |
|---|---|---|
| transform, opacity | 否 | 高 |
| left, top, width | 是 | 低 |
| background-color | 否（仅重绘） | 中 |
另一个误区是认为HTML5的canvas才是动画唯一正解。实际上DOM动画在UI反馈场景里开发效率更高，canvas适合粒子或游戏。选错技术栈会让简单需求变得难以维护。掌握CSS3动画之后，再配合will-change提示浏览器提前建层，就能稳定跑满60fps。
HTML5CSS3_animationweb_animation修改时间：2026-08-02 07:15:33