animation 动画
animation 是动画，而 transition 是过渡，它们 用法 很相似，但实际又不大相同，可以说 animation 是 transition 的 升级 版，它可以创建 一个 持续的 自动 执行动画。
1. 官方定义
animation 属性 是 一个 简写 属性 ，它是下面 属性 的缩写：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-i tera tion-count
animation-direction
animation-fill-mode
注意：请始终规定 animation-duration 属性 ，否则时长为 0，就不会播放动画了。
2. 解释
animation 是几个 属性 值的缩写，我们定义 一个 动画通常使用 animation 就足够了，如果想单独改变动画的某些 属性 可以使用单独的动画 属性 去改变，构成 一个 动画的最基本 属性 需要 一个 @keyframes 和 duration 。
3. 语法
.demo {
animation : name duration timing-function delay i tera tion-count direction ;
}
属性 值说明：
属性 描述 animation-name 规定需要绑定到选择器的 keyframe 名称 。 animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function 规定动画的速度曲线。 animation-delay 规定在动画开始之前的延迟。以秒或毫秒计。 animation-i tera tion-count 规定动画应该播放的 次数 。 一个 整数代表重复的 次数 或者 infinite 无限重复 animation-direction 规定是否应该轮流反向播放动画。 @H_ 404 _134@
animation-direction 参数值详解：
值 描述 nor mal 默 认值。动画按正常播放。 reverse 动画反向播放。 alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。 alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。 initial 设置该 属性 为它的 默 认值。 inherit 从父元素继承该 属性 。 @H_ 404 _134@
animation-fill-mode 参数值详解
值 描述 none 默 认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards 设置动画结束之后使用结束后的状态作为样式。 backwards 在设置延迟之后 元素使用动画设置的开始的状态 both 在设置动画延迟情况下，元素使用开始的状态，并在整个动画结束之后使用结束之后的状态。 initial 设置该 属性 为它的 默 认值。 inherit 从父元素继承该 属性 。 @H_ 404 _134@
4. 兼容性
IE Edge Firefox Chrome Safari Opera ios android 9+ 12+ 28+ 4+ 6.1+ 12.1+ 7+ 4.4 @H_ 404 _134@
5. 实例
使用 from to 定义 一个 名字为 go 的 @keyframes 的动画。
@keyframes go {
from {
width : px ;
}
to {
width : px
}
}
.demo {
width : px ;
height : px ;
background : #000 ;
animation : go s ;
}
效果 图
动画 效果 图
说明：这是最简单的动画创建方式，使用 @keyframes 命名 一个 叫做 go 的动画，再为这个动画 加上 一个 2s 的持续时间 ，构成了最简单的动画，但是它只播放一次。
对上面的例子进行改造，通过设置动画 函数 ， 修改 动画执行的快慢。
@keyframes go {
from {
width : px ;
}
to {
width : px
}
}
.demo {
width : px ;
height : px ;
background : #000 ;
animation : go s ease-in ; /*这里 增加 了动画 函数 */
}
效果 图
通过设置动画 函数 修改 动画执行的快慢 效果 图
说明：通过在 animation 增加 第 3 个参数 animation-timing-function 动画 函数 ，它可以改变动画@H_611_ 502 @运动的速度曲线 。
Tips：要注意的是，不管怎么改变动画的结束时间是不会变的。具体可以看 timing-function 的介绍。
继续对上面例子 增加 一个 延迟实现 3s 后在执行动画。
@keyframes go { from { width : px ; } to { width : px } } .demo { width : px ; height : px ; background : #000 ; animation : go s ease-in s ; /*这里 增加 了动画延迟时间 3 秒*/ }
效果 图
延迟动画 效果 图
说明：动画延迟了 3 秒开始再次执行了。
增加 animation-i tera tion-count 属性 ，改变动画的播放 次数 。
动画延迟 3s 开始播放，播放 2 次结束。
@keyframes go { from { width : px ; } to { width : px } } .demo { width : px ; height : px ; background : #000 ; animation : go s ease-in s ; /*播放 2 次结束*/ }
效果 图
多次播放动画 效果 图
说明：通过 效果 图可以很清楚的看到了动画反复执行了 2 次，@H_611_ 502 @值得注意的这个 3s 的延迟只针对第一次动画开始前，在动画开始之后重复循环的时候就不再起作用了。
动画延迟 3s 开始播放，然后无限循环。
@keyframes go { from { width : px ; } to { width : px } } .demo { width : px ; height : px ; background : #000 ; animation : go s ease-in s infinite ; /*无限次循环*/ }
效果 图
无限循环 效果 图
说明：通过 infinite 动画在经过 3s 的延迟之后开始无限的循环了。
animation-direction 来改变动画在循环过程中是否反向。
延续上面的例子，我们发现动画每次循环都是从开始的位置开始循环的，下面通过 添加 animation-direction 来改变动画在循环过程中是否反向。
@keyframes go { from { width : px ; } to { width : px } } .demo { width : px ; height : px ; background : #000 ; animation : go s ease-in s infinite reverse ; /*动画反向播放*/ }
使用 alternate 属性 ，让动画在奇数时候正向播放，偶数时候反向播放。
@keyframes go { from { width : px ; } to { width : px } } .demo { width : px ; height : px ; background : #000 ; animation : go s ease-in s infinite alternate ; }
效果 图
<!DOCTYPE html> < html lang = " en " > < head > < Meta charset = " UTF-8 " > < Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > Document </ title > < style > @keyframes go { from { width : px ; } to { width : px } } .demo { width : px ; height : px ; background : #000 ; animation : go s ease-in s infinite ; /*动画反向播放*/ } .demo-1 { width : px ; height : px ; background : #000 ; animation : go s ease-in s infinite reverse ; /*动画反向播放*/ } .demo-2 { width : px ; height : px ; background : #000 ; animation : go s ease-in s infinite alternate ; /*动画偶数反向播放*/ } </ style > </ head > < body > < h2 > 正常播放顺序 </ h2 > < div class = " demo " > </ div > < h2 > 反向播放顺序 </ h2 > < div class = " demo-1 " > </ div > < h2 > 奇数正向播放偶数次反向播放 </ h2 > < div class = " demo-2 " > </ div > </ body > </ html >animation-fill-mode 设置动画的初始或结束状态。
单次动画使用 forwards 设置动画结束之后使用结束后的状态作为样式。
@keyframes go { from { width : px ; } to { width : px } } .demo { width : px ; height : px ; background : #000 ; animation : go s ease-in s forwards ; }
在设置延迟之后元素中使用 backwards 设置动画的开始的样式。
@keyframes go { from { width : px ; } to { width : px } } .demo { width : px ; height : px ; background : #000 ; animation : go s ease-in s backwards ; }
效果 图
效果 图
<!DOCTYPE html> < html lang = " en " > < head > < Meta charset = " UTF-8 " > < Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > Document </ title > < style > @keyframes go { from { width : px ; } to { width : px } } .demo { width : px ; height : px ; background : #000 ; animation : go s ease-in s ; /*动画反向播放*/ } .demo-1 { width : px ; height : px ; background : #000 ; animation : go s ease-in s forwards ; } .demo-2 { width : px ; height : px ; background : #000 ; animation : go s ease-in s backwards ; } </ style > </ head > < body > < h2 > 正常动画 </ h2 > < div class = " demo " > </ div > < h2 > 设置 forwards </ h2 > < div class = " demo-1 " > </ div > < h2 > 设置 backwards 注意观察开始 </ h2 > < div class = " demo-2 " > </ div > </ body > </ html >
说明：在鼠标刷新浏览器我们看到本应该 100px 宽度的元素是以 200px 开始的，当动画结束之后，回到了 100px。
both 在设置动画延迟情况下，元素使用开始的状态，并在整个动画结束之后使用结束之后的状态。
@keyframes go { from { width : px ; } to { width : px } } .demo { width : px ; height : px ; background : #000 ; animation : go s ease-in s both ; }
效果 图
设置动画开始和结束状态 效果 图
<!DOCTYPE html> < html lang = " en " > < head > < Meta charset = " UTF-8 " > < Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > Document </ title > < style > @keyframes go { from { width : px ; } to { width : px } } .demo { width : px ; height : px ; background : #000 ; animation : go s ease-in s ; /*动画反向播放*/ } .demo-3 { width : px ; height : px ; background : #000 ; animation : go s ease-in s both ; } </ style > </ head > < body > < h2 > 正常动画 </ h2 > < div class = " demo " > </ div > < h2 > 设置 both 注意观察开始和结束 </ h2 > < div class = " demo-3 " > </ div > </ body > </ html >
6. 经验 分享
当动画造成 页面 的卡顿，可以用下面这种方式尝试 解决 ：
开启 GPU 加速，例如使用 transform:transition3d(0,0,0) 。有时候需要实现鼠标 hover 到元素上，会出现 一个 提示 效果 。如果使用 transition 过渡 属性 发现总是不能实现这个 效果 ，而 animation 是可以 解决 的：
< div class = " demo " > 往事不要再提 < span > 人生已多风雨 </ span > </ div >
.demo { cursor : pointer ; } .demo >span { dis play : none ; } .demo :hover >span { dis play : block ; animation : shows s forwards ; } @keyframes shows { from { opacity : ; } to { opacity : ; } }
效果 图
说明： transition 不能实现（隐藏/ 显示 ）之 间的 过渡效，原因是 diaplay:none 设置之后虽然元素在 页面 中，但是这个 标签 不在浏览器的渲染进程里面。如果这个元素 属性 为 dis play：block 相当于元素从新渲染出来，这时里面的 opacity: 0 到 1 就不起作用了。所以这里使用 animation 正好可以弥补这个问题。
7. 小结
尽量停止不可以见的动画，以减少卡顿。 尽量使用 transform 属性 完成动画内部 属性 的切换，因为它是使用 GPU 计算的，也会提升动画的 性能 。
columns 字符分割 ? ?transition 过渡声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did92589