CSS3 动画核心指南：Transitions 与 Animations
简介：本文详解CSS3两大核心动画能力：Transitions过渡动画与Animations关键帧动画，从基础语法、速度曲线对比到多属性同步过渡、循环帧动画实战，帮助开发者快速掌握无需JS即可实现的丝滑动效，同时补充浏览器兼容性处理与性能优化建议，适配按钮交互、页面切换、加载动画等多种业务场景
一、Transitions过渡动画
在CSS3中 transition 可以让元素属性从一个值平滑过渡到另一个值，无需复杂JS代码即可实现丝滑交互效果。支持IE10+、Firefox4+、Chrome8+、Safari3+、Opera10+，现代浏览器无需额外前缀即可直接使用。
核心语法：
transition: property duration timing-function delay- transition-property：指定需要过渡的CSS属性
- transition-duration：过渡动画的总时长
- transition-timing-function：过渡的速度曲线
- transition-delay：动画开始前的延迟时间，默认值为 all 0 ease 0
多属性过渡：不同属性的过渡规则用逗号分隔，例如 ：
transition: background-color 1s, width 2s ease-in不同的 transition-timing-function 会带来完全不同的动效体感，5种常用曲线特性一目了然：
二、Animations 关键帧动画进阶
和 Transitions 仅支持首尾值过渡不同，@keyframes关键帧动画可以自定义多个时间节点的属性状态，实现更复杂的循环动画效果。
核心语法：
animation: name duration timing-function iteration-count- name：自定义关键帧集合的名称
- duration：动画单次执行的总时长
- iteration-count：循环次数，支持设置为数字或 infinite 无限循环
通过 @keyframes 定义0%~100%不同阶段的背景色状态，即可实现元素自动循环变色的效果，无需用户触发hover等交互。还可搭配animation-direction实现动画反向播放，animation-fill-mode 控制动画结束后的元素状态。
开发避坑小贴士
- 仅支持数值类、颜色类、transform类属性的过渡，类似display: none这类离散属性无法触发过渡效果。
- 避免在大量DOM元素上开启无限循环动画，防止占用过多CPU资源影响页面性能。
- 低版本浏览器兼容阶段可添加-webkit-等厂商前缀，现代开发中已无需重复书写。
