在CSS3出现之前，网页动画主要靠JavaScript实现——用setInterval或requestAnimationFrame不断修改元素的CSS属性，实现动画效果。这种方式的问题是：性能差（JavaScript操作DOM开销大）、代码复杂（需要自己写动画逻辑）、不流畅（容易掉帧）。

CSS3的出现改变了这一切。CSS3提供了transition（过渡）和animation（动画）两个属性，让网页动画变得简单、高效、流畅。CSS3动画由浏览器原生渲染，性能比JavaScript动画好很多，尤其是在移动端，CSS3动画的流畅度优势更明显。

现在，CSS3动画已经成为前端开发的必备技能。按钮悬停效果、页面切换动画、加载动画、交互反馈，这些都可以用CSS3动画实现。今天就来分享我在项目中使用CSS3动画的实战经验。

transition：简单的过渡动画

transition是CSS3中最简单的动画属性，它的作用是：当元素的CSS属性发生变化时，不是瞬间变化，而是在指定的时间内平滑过渡。

比如，一个按钮，鼠标悬停时背景色从白色变成蓝色：

.btn {
    background-color: #fff;
    transition: background-color 0.3s ease;
}
.btn:hover {
    background-color: #007bff;
}

这样，鼠标悬停时，背景色会在0.3秒内从白色平滑过渡到蓝色，而不是瞬间变化。

transition的语法是：transition: 属性名 持续时间 缓动函数 延迟时间。

  • 属性名：要过渡的CSS属性，比如background-color、width、transform，也可以用all表示所有属性
  • 持续时间：动画持续的时间，单位秒（s）或毫秒（ms）
  • 缓动函数：动画的速度曲线，常见的有ease（默认，先慢后快再慢）、linear（匀速）、ease-in（先慢后快）、ease-out（先快后慢）、ease-in-out（先慢后快再慢）
  • 延迟时间：动画开始前的等待时间，可选

可以同时过渡多个属性，用逗号分隔：

transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;

transition适合简单的交互动画，比如按钮悬停、菜单展开、卡片翻转等。它的特点是需要触发条件（如:hover、:focus、类名变化），不能自动播放，也不能控制动画的中间状态。

animation：关键帧动画

如果需要更复杂的动画，比如自动播放、循环播放、控制中间状态，就需要用animation属性。animation和@keyframes配合使用，可以定义完整的关键帧动画。

首先用@keyframes定义动画的关键帧：

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

这个动画定义了从opacity:0、下移20px，到opacity:1、位置正常的过渡效果。from表示起始状态（0%），to表示结束状态（100%）。也可以用百分比定义更复杂的中间状态：

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

这个动画实现了弹跳效果，在不同的时间点有不同的位置。

定义好关键帧后，用animation属性应用到元素上：

.element {
    animation: fadeIn 0.6s ease-out;
}

animation的语法是：animation: 动画名 持续时间 缓动函数 延迟时间 播放次数 播放方向 填充模式 运行状态。

  • 动画名：@keyframes定义的动画名称
  • 持续时间：动画持续时间
  • 缓动函数：速度曲线
  • 延迟时间：开始前的等待时间
  • 播放次数：infinite表示无限循环，数字表示播放次数
  • 播放方向：normal（正常）、reverse（反向）、alternate（交替）、alternate-reverse（反向交替）
  • 填充模式：none（默认，动画结束后回到初始状态）、forwards（动画结束后保持结束状态）、backwards（动画延迟期间应用起始状态）、both（同时应用forwards和backwards）
  • 运行状态：running（运行）、paused（暂停）

animation适合复杂的动画效果，比如页面加载动画、加载指示器、背景动画等。它可以自动播放、循环播放、控制中间状态，比transition更强大。

transform：2D和3D变换

做CSS3动画，transform是最常用的属性之一。transform可以对元素进行位移、旋转、缩放、倾斜等变换，而且这些变换不会影响页面布局（元素的原始位置保留），性能也很好（浏览器会使用GPU加速）。

2D变换的常用函数：

  • translate(x, y)：位移，沿X轴和Y轴移动
  • rotate(deg)：旋转，顺时针旋转指定角度
  • scale(x, y)：缩放，沿X轴和Y轴缩放
  • skew(xdeg, ydeg)：倾斜，沿X轴和Y轴倾斜
/* 鼠标悬停时，元素放大1.1倍并旋转5度 */
.card:hover {
    transform: scale(1.1) rotate(5deg);
    transition: transform 0.3s ease;
}

3D变换需要先设置perspective（透视），然后用3D变换函数：

  • translate3d(x, y, z)：3D位移
  • rotateX(deg)、rotateY(deg)、rotateZ(deg)：绕X/Y/Z轴旋转
  • scale3d(x, y, z)：3D缩放
.container {
    perspective: 1000px;
}
.card {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.card:hover {
    transform: rotateY(180deg);
}

这个例子实现了卡片翻转效果，鼠标悬停时卡片绕Y轴旋转180度。

transform是做CSS3动画的利器，几乎所有的动画效果都可以用transform实现。而且transform动画的性能非常好，因为浏览器会把元素提升为独立的渲染层，用GPU加速，不会触发重排（reflow），只会触发重绘（repaint）。

性能优化注意事项

做CSS3动画，性能是必须考虑的。不好的动画会卡顿、掉帧，影响用户体验。以下是一些性能优化的注意事项：

第一，优先使用transform和opacity做动画。这两个属性不会触发重排，只会触发重绘，而且浏览器会自动使用GPU加速，性能最好。避免用width、height、margin、padding、top、left等属性做动画，这些属性会触发重排，性能差。

第二，使用will-change提示浏览器。如果某个元素即将做动画，可以设置will-change属性，提示浏览器提前做好优化准备：

.element {
    will-change: transform, opacity;
}

但不要滥用will-change，只在确实需要的元素上设置，否则会占用过多内存。

第三，避免同时动画太多元素。同时动画的元素太多，即使每个都是transform动画，也可能卡顿。如果需要大量元素同时动画，可以考虑用Canvas或WebGL。

第四，移动端要特别注意性能。移动端的CPU和GPU性能比桌面端差，动画更容易卡顿。移动端的动画要更简洁、持续时间更短、同时动画的元素更少。

第五，使用缓动函数让动画更自然。不同的动画场景适合不同的缓动函数：界面元素的出现适合ease-out（先快后慢），界面元素的消失适合ease-in（先慢后快），循环动画适合linear（匀速）。好的缓动函数能让动画看起来更自然、更专业。

总结

CSS3动画让网页变得生动有趣，transition适合简单的交互动画，animation适合复杂的关键帧动画，transform提供了强大的变换能力。掌握这三个属性，就能做出大部分网页动画效果。

但动画不是越多越好，恰到好处的动画能提升用户体验，过多的动画反而会干扰用户、影响性能。做动画之前，先想清楚这个动画的目的是什么——是提供反馈、引导注意力、还是增强愉悦感？有明确目的的动画才是好动画。

希望这篇文章能帮到正在学习CSS3动画的你。