CSS3动画与过渡：2011年用纯CSS实现页面动效

一、CSS3 transition入门

transition用于属性变化时的平滑过渡。最常见的应用场景是导航菜单悬停变色、按钮 hover效果、图片缩放。

基本语法：

.btn { background: #3498db; transition: background 0.3s ease; }
.btn:hover { background: #2980b9; }

这样鼠标悬停时背景色会在0.3秒内平滑过渡，而不是生硬跳变。

transition可以控制多个属性：transition: all 0.3s ease, color 0.5s linear;

二、常用过渡属性

• opacity：透明度变化，常用于淡入淡出。
• transform: scale()：元素缩放，按钮悬停时轻微放大。
• transform: translate()：元素位移，下拉菜单滑入。
• width/height：尺寸变化，手风琴折叠效果。

三、CSS3 animation关键帧

transition只能定义起始和结束状态，animation可以定义多个关键帧，实现更复杂的动画：

@keyframes slideIn {
  0% { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.menu { animation: slideIn 0.5s ease-out; }

这样元素从左侧滑入并淡入显示。

四、2011年浏览器兼容

CSS3动画在Chrome、Firefox、Safari中支持良好，但需要添加前缀：

• -webkit-（Chrome、Safari）
• -moz-（Firefox）
• -o-（Opera）

IE10才开始支持transition和animation，IE9及以下完全不支持。对于企业网站，我们的原则是：动画作为增强体验，不做动画也不能影响基本功能。

五、实战案例：导航菜单下拉动画

2011年我们经常用纯CSS实现下拉菜单：

• 默认状态下，下拉菜单opacity: 0，height: 0，overflow: hidden。
• 鼠标悬停在父菜单时，opacity: 1，height: auto，配合transition实现平滑展开。

这种方式比JavaScript实现的下拉菜单更流畅，代码更少。

六、性能注意事项

不是所有属性的transition都性能好。2011年我们已经知道：

• animating width/height/top/left会触发重排（reflow），性能差。
• animating transform和opacity只触发合成（composite），性能好。
• 尽量使用transform和opacity做动画，避免布局属性动画。

七、总结

CSS3动画让网页交互变得更流畅、更丰富。2011年我们在企业官网、营销活动页中大量使用CSS3过渡效果，既提升了用户体验，又减少了JavaScript依赖。虽然IE8用户看不到这些效果，但渐进增强的设计保证了基本功能不受影响。

相关推荐

技术干货 · 2026-07-22

端侧小模型与云端大模型协同架构设计

技术干货 · 2026-05-20

AIOps全面普及：2026年企业智能运维落地全景

技术干货 · 2026-05-12

企业AI网关：统一大模型接入、成本控制与合规审计