前端Wiki/CSS3/进阶/动画 animation

@keyframes 关键帧

@keyframes 定义一段动画的「剧本」：在哪些时间点、元素是什么状态。浏览器负责在帧之间自动补间：

0%（可用 from 代替）是起点，100%（to）是终点，中间可插任意多的百分比帧。
帧里写的是该时刻的样式，未声明的属性会在相邻帧之间插值。

定义好的剧本用 animation 属性「投给」元素播放：

animation: 动画名时长缓动延迟次数方向;
infinite 无限循环；alternate 往返播放（第二遍倒放），适合呼吸、摇摆类效果。

与 transition 的本质区别：transition 是被动的（状态变了才播一次），animation 是主动的（声明即播放、可循环、可控暂停），且中间可以有任意多个关键状态。

本节要点@keyframes 定义帧剧本（0%~100% 或 from/to），animation 指名播放；infinite 循环、alternate 往返；需要自动播放或循环的动效用 animation。

CSS

<style>
  .pulse {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #39c5cf;
    /* 播放 pulse：1.5秒 无限循环 往返 */
    animation: pulse 1.5s ease-in-out infinite alternate;
  }
  @keyframes pulse {
    from { transform: scale(1);   opacity: 1; }
    to   { transform: scale(1.3); opacity: .5; }
  }
</style>
<div class="pulse"></div>

🔗 相关词条transition animation keyframes 浏览器元素

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读