css3教程动画特效全解析：transition与animation核心用法

想给网页加动画效果，却对着教程里的代码一脸懵？设置了动画属性，网页元素却纹丝不动？好不容易做出动画，要么卡顿要么效果奇怪？其实啊，CSS3 动画没那么难，核心就两个工具：transition（过渡动画）和 animation（关键帧动画）。今天兔子哥就从新手视角，把这两个工具的用法拆解开，带大家一步步做出流畅的动画效果，一起往下看吧！

一、先搞懂：transition 和 animation 到底有啥不一样？

新手最容易犯的错：分不清这俩工具的用途
刚开始学动画，总有人问：“都是做动画的，为啥要有两个属性？” 其实它们的适用场景完全不同，就像螺丝刀和扳手，各有各的活儿。
简单说：

• transition（过渡动画）：需要 “触发条件” 才能动，比如鼠标 hover、点击元素，适合做 “状态变化” 的动画，比如按钮变色、元素缩放。
• animation（关键帧动画）：不用触发条件，加载页面就能自动播放，还能循环、暂停，适合做复杂的连续动画，比如加载动画、元素旋转。

给大家做个表格对比，更清楚：

特性	transition 过渡动画	animation 关键帧动画
是否需要触发	需要（hover、click 等）	不需要，可自动播放
动画复杂度	简单（从 A 状态到 B 状态）	复杂（多状态连续变化）
循环播放	不能自动循环	可设置循环次数、无限循环
核心作用	美化状态切换	实现独立连续动画

二、transition 过渡动画：让元素 “优雅变装”

核心问题：transition 怎么用？为啥我设置了没效果？
transition 就像给元素的状态变化 “加个缓冲”，比如按钮从灰色变红色，默认是瞬间切换，加了 transition 就会慢慢变色，更自然。

1. transition 的基础用法（3 步就能上手）

✅ 基本语法：transition: 要过渡的属性 时长 timing-function 延迟时间;

• 要过渡的属性：比如 color（颜色）、width（宽度）、transform（变形），写 all 就是所有属性都过渡
• 时长：动画持续多久，比如 0.3s（秒）、300ms（毫秒）
• timing-function：动画速度曲线，新手先用 ease（慢快慢）就行
• 延迟时间：多久后开始动画，比如 0.2s 就是延迟 0.2 秒

2. 新手必练案例：hover 时按钮变色 + 缩放

css

/* 按钮默认样式 */.btn {width: 120px;height: 40px;background: #333;color: white;/* 加过渡动画 */transition: all 0.3s ease; /* 所有属性变化都用0.3秒过渡 */}/* 鼠标hover时的样式 */.btn:hover {background: #ff6600; /* 背景变色 */transform: scale(1.1); /* 放大1.1倍 */}

这段代码里，鼠标移到按钮上，背景会慢慢变红，按钮还会轻微放大，松开鼠标又会慢慢变回原样，这就是 transition 的效果。

3. 常见问题：为啥我的 transition 没效果？

• 没写 “触发条件”：比如只加了 transition，没写 hover 或其他触发方式，动画当然不生效
• 过渡属性不对：不是所有属性都能过渡，比如 display（none→block）就不行，换成 opacity（透明度）试试
• 时长没设置：忘了写动画时长（比如只写 transition: all;），默认时长为 0，看不到效果

三、animation 关键帧动画：让元素 “自己动起来”

核心问题：animation 比 transition 复杂，新手该从哪开始学？
animation 的核心是 “关键帧”，就是定义动画的多个状态，浏览器会自动把这些状态连起来播放。虽然步骤多一点，但学会了能做出超酷的效果。

1. animation 的基础用法（4 步走）

✅ 步骤拆解：

1. 用@keyframes定义关键帧：告诉浏览器动画的各个状态
2. 设置动画名称：把关键帧和元素关联起来
3. 设置动画时长、循环次数等属性
4. （可选）设置播放方式、暂停等进阶属性

2. 新手必练案例：加载动画（无限旋转的圆圈）

css

/* 1. 定义关键帧：从0%到100%的状态 */@keyframes rotate {0% { transform: rotate(0deg); } /* 开始：不旋转 */100% { transform: rotate(360deg); } /* 结束：旋转360度 */}/* 2. 给元素应用动画 */.loading {width: 50px;height: 50px;border: 5px solid #eee;border-top-color: #ff6600; /* 顶部边框变色 */border-radius: 50%; /* 变成圆形 *//* 3. 设置动画属性 */animation-name: rotate; /* 关联关键帧名称 */animation-duration: 1s; /* 1秒转一圈 */animation-iteration-count: infinite; /* 无限循环 */animation-timing-function: linear; /* 匀速旋转 */}

这段代码会生成一个不停旋转的圆圈，常用于加载场景。关键帧里还能加更多状态，比如 时加个缩放，动画会更丰富。

3. 核心属性速记（新手记这 5 个就够）

• animation-name：关键帧名称（必须和 @keyframes 定义的一致）
• animation-duration：动画时长（比如 1s，必填，否则不播放）
• animation-iteration-count：循环次数（infinite 是无限）
• animation-delay：延迟播放（比如 0.5s，延迟 0.5 秒开始）
• animation-fill-mode：动画结束后停在哪（forwards 停在最后一帧）

四、实战技巧：什么时候用 transition？什么时候用 animation？

学了两个工具，实际开发中该怎么选？ 兔子哥总结了几个场景，新手可以直接套用：

1. 用 transition 的场景

• 按钮 hover 效果（变色、缩放、阴影变化）
• 导航栏下拉菜单（从隐藏到显示的过渡）
• 输入框聚焦效果（边框变色、宽度变化）
  这些场景都是 “用户触发→状态变化”，用 transition 简单又高效，代码少还好维护。

2. 用 animation 的场景

• 页面加载动画（进入页面就自动播放）
• 倒计时动画（数字变化、进度条移动）
• 复杂交互效果（比如元素上下浮动、闪烁提示）
  这些场景需要自动播放或多状态变化，animation 更能满足需求。

五、避坑指南：新手做动画最容易踩的 5 个坑

1. 动画卡顿？别用太多属性同时过渡
   同时给元素的 width、height、color、transform 等多个属性加动画，容易卡顿。优先用 transform（缩放、旋转）和 opacity（透明度），这两个属性浏览器优化得更好，动画更流畅。
   
2. 动画不循环？检查 iteration-count
   用 animation 时，默认只播放一次就停了。想循环播放，一定要加animation-iteration-count: infinite;，别漏了这个属性。
   
3. transition 没效果？试试加初始状态
   比如想让元素从透明变不透明，要给元素先设置opacity: 0;（初始状态），再在 hover 时设置opacity: 1;，否则浏览器不知道从啥状态过渡。
   
4. 关键帧名称别写错
   @keyframes 定义的名称是 “rotate”，animation-name 写成 “rotata”（多写个 a），动画肯定不生效。新手写完最好复制粘贴，避免拼写错误。
   
5. 别过度用动画
   动画是为了提升体验，不是越多越好。按钮加个 hover 动画就够了，整页元素都在动会让用户眼花，适可而止最重要。
   

最后跟新手朋友们说句心里话，CSS3 动画看着复杂，其实多练几个小案例就会有感觉。刚开始不用追求复杂效果，先把 transition 的 hover 效果练熟，再尝试用 animation 做个旋转动画，一步步来。兔子哥刚开始学的时候，做一个简单的按钮变色动画都试了十几次，后来发现关键是 “多改参数看效果”—— 把时长从 0.3s 改成 1s，看看慢动画怎么变；把 timing-function 从 ease 换成 linear，感受速度曲线的不同。
动画的核心是 “让网页活起来”，但别为了动画而动画。记住，好的动画是 “用户感觉不到它的存在，但缺了它又觉得别扭”。按今天讲的方法多动手试试，你会发现自己做的网页越来越有质感，希望能帮到你！

标签： timing-function 纹丝不动