@keyframes 基础
@keyframes 定义动画的关键帧：from/to 表示起止，或用百分比写多个节点。与 transition 的区别是：transition 需要状态触发（hover、加类），animation 可以自己跑、循环、暂停。
定义关键帧后还要用 animation 属性把它“挂”到元素上，否则不会执行。同一个 @keyframes 可以被多个元素复用，改一处全站同步。
- from/to 等价于 0%/100%，百分比节点可写任意多个
- 同名 @keyframes 后定义的会覆盖先定义的（注意命名冲突）
- 关键帧之间会自动插值，只需写“变化的瞬间”
HTML
<style> @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .6; } 100% { transform: scale(1); opacity: 1; } } .dot { width: 60px; height: 60px; margin: 40px auto; border-radius: 50%; background: #f778ba; animation: pulse 1.6s ease-in-out infinite; } </style> <div class="dot"></div>
本节要点@keyframes 定义“帧”，animation 播放“帧”；动画能自跑、循环、暂停，transition 不行。
