CSS3 动画教程

CSS3 动画零基础完整版教程

CSS3 动画分两种：transition 过渡动画（简单状态变化）、@keyframes 关键帧动画（复杂循环/多段动画），纯CSS无需JS，浏览器硬件加速、性能极高。

一、transition 过渡动画（入门首选）

适合：hover、点击、样式切换平滑渐变，只有起始+结束2个状态

语法

/* 复合写法：属性 时长 速度曲线 延迟 */
transition: all 0.5s ease 0.1s;

常用参数

• all：所有变化属性都过渡（也可单独写width、opacity、transform）
• 0.5s：动画时长（秒s/毫秒ms）
• ease：缓动曲线（匀速linear、先慢后快ease-in、先快后慢ease-out）
• 0.1s：延迟多久执行

实战：鼠标悬停缩放变色

.box {
  width: 100px;
  height: 100px;
  background: red;
  /* 开启过渡 */
  transition: transform 0.3s, background 0.3s;
}
.box:hover {
  transform: scale(1.2); /* 放大1.2倍 */
  background: blue;
}

二、@keyframes 关键帧动画（复杂循环动画）

核心两步：1. @keyframes 定义动画每帧样式 → 2. animation 绑定到元素

1. 定义关键帧（from/to / 百分比）

/* 动画名：move */
@keyframes move {
  from { transform: translateX(0); } /* 0% 起点 */
  50% { transform: translateX(150px); } /* 中间状态 */
  to { transform: translateX(300px); } /* 100% 终点 */
}

• from = 0%，to = 100%
• 可写任意百分比：20%、40%、80%，做多段轨迹动画

2. animation 绑定动画（复合属性）

.box {
  /* 动画名 时长 缓动 延迟 循环次数 方向 填充模式 */
  animation: move 2s ease 0s infinite alternate;
}

animation 全属性详解

1. animation-name：动画名称（和@keyframes一一对应）
2. animation-duration：单次时长（必写）
3. animation-timing-function：速度曲线
   • linear 匀速、ease 默认、ease-in 渐快、ease-out 渐慢、ease-in-out 两头慢中间快
4. animation-delay：动画延迟开始时间
5. animation-iteration-count：循环次数
   • 数字：3次；infinite 无限循环
6. animation-direction：播放方向
   • normal 正向（默认）
   • reverse 反向
   • alternate 正→反交替
   • alternate-reverse 反→正交替
7. animation-fill-mode：动画结束状态
   • none 回到初始
   • forwards 保持最后一帧
   • backwards 等待延迟时就应用第一帧
8. animation-play-state：running播放 / paused暂停

实战：无限旋转+变色方块

@keyframes rotate {
  0% { transform: rotate(0deg); background: red; }
  50% { transform: rotate(180deg); background: yellow; }
  100% { transform: rotate(360deg); background: blue; }
}
.box {
  width: 100px;
  height: 100px;
  animation: rotate 3s linear infinite forwards;
}

三、transform 常用形变（动画必备）

配合动画做位移、旋转、缩放、倾斜

• translate(x,y) 平移transform: translate(50px, 20px) rotate(45deg) scale(1.1);
• rotate(deg) 旋转
• scale(n) 缩放
• skew(deg) 倾斜

四、transition vs @keyframes 区别对比

五、高频实战案例

1. 淡入入场动画

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.box { animation: fadeIn 1s ease forwards; }

2. 上下弹跳循环

@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}
.box { animation: bounce 1s infinite ease-in-out; }

六、浏览器兼容

主流浏览器全兼容，无需前缀；老旧webkit内核可加：

@-webkit-keyframes xxx {}
-webkit-animation: xxx;