CSS动画CSS 动画就是由一种状态（CSS样式），过渡到另一中状态（CSS样式）的动态过程，CSS中提供了两种动画实现方式：transition、animation。

HTML系列：

• 人人都懂的HTML基础知识-HTML教程(1)
• HTML元素大全(1)
• HTML元素大全(2)-表单

CSS系列：

• CSS基础知识筑基
• 常用CSS样式属性
• CSS选择器大全48式
• CSS布局秘籍(1)-任督二脉BFC/IFC
• CSS布局秘籍(2)-6脉神剑
• CSS动画-transition/animation

00、CSS动画

CSS系列：

• CSS基础知识筑基
• 常用CSS样式属性
• CSS选择器大全48式
• CSS布局秘籍(1)-任督二脉BFC/IFC
• CSS布局秘籍(2)-6脉神剑
• CSS动画-transition/animation

CSS 动画就是由一种状态（CSS样式），过渡到另一中状态（CSS样式）的动态过程，CSS中提供了两种动画实现方式：transition、animation。

定义 基于CSS属性变化的简单过渡动画 基于关键帧@keyframes实现更复杂的动画 复用 只能执行一次，不可重复执行，复用不便 可多次执行，复用方便 执行方式 页面加载不会默认执行，须触发执行 可直接执行、可控制 动画事件 无，只能预估动画时间，用定时器setTimeout模拟 支持监听事件，如动画开始、结束 动画帧 只有初始帧（当前样式）、结束帧（触发动画时的样式） 支持任意多帧动画设置 五星好评 灵活简单 功能丰富

对比	transition动画	animation动画

---

01、transition过渡动画

1.1、transition动画

transition 过渡动画是针对CSS样式的变化，进行过渡，如width、opacity、color改变的过渡，可以实现CSS样式的平滑动态过渡动画效果。

transition 动画本身并不会主动执行，须通过其他方式触发，动画属性变化才会触发执行。常用一些伪类触发：:hover、:focus、:active（鼠标按下激活）、:target（锚点元素id）、:checked，或者JS控制CSS样式来触发动画执行。

transition 过渡动画的简写属性，包括下面这些小弟 （transition /trænˈzɪʃ(ə)n/ 过渡） transition-property 指定过渡动画的CSS属性名，多个,分割，默认all都生效 transition-property: width; transition-duration 动画时长，默认0，单位s、ms，*必备 transition-duration: 1s; transition-delay 动画延时时长，延时执行动画 transition-delay: 1s; *-timing-function 指定过渡动画执行缓动曲线函数，详见后面animation章节 transition-timing-function: linear;

transition过渡	描述	示例