Chapter 7 Transition&Animation
|
Version |
Update |
Note |
|
1.0 |
2016-6-11 |
首次添加。欢迎在评论中指出错误，一经核实，立即修订，且注明贡献者。 |
1、transition
transition的作用是在状态变化之间增加时间轴属性，使其呈现平滑过渡的动态效果。
它是以下四个属性的简写：
1.1 transition-property
设置参与过渡的属性。具备动画性的属性才会有过渡效果。
值：属性名（多个属性名用逗号隔开），all
1.2 transition-duration
设置过渡的持续时间。
1.3 transition-timing-function
设置时间曲线类型。
接受的值：linear ease ease-in ease-out ease-in-out
cubic-bezier(n, n, n, n)（贝塞尔曲线）
1.4 transition-delay
设置延迟时间。
2、Animation
设置动画需先用@keyframes定义动画。其工作原理就是设置每一帧的样式，和flash动画、视频制作的原理是一样的。每一帧的时刻用百分比设置。相邻两帧采用过渡变化。
@keyframes name{
0%{ }
20%{ }
100%{ }
}
首尾还可以用关键字from和to代替，并且不是必须的。因为默认第一帧和最后一帧的状态都是原始样式。
animation是以下八个属性的简写：
2.1 animation-name
指定动画名称。
2.2 animation-duration
指定动画持续时间。
2.3 animation-timing-function
类似于transition-timing-function
jQuery.easing.js提供了更多预设的时间曲线，它们其实全都是基于贝塞尔曲线设置的。
2.4 animation-delay
设置延迟。
3、动画控制
3.1 animation-iteration-count
iteration表示循环。该属性用于指定循环次数。
值：数字、infinite（无限循环）
3.2 animation-direction
设置动画播放的方向。
值：normal（默认正向），reverse（反向），alternate（正反交替），alternate-reverse（“反正”交替）
设置交替播放，需要保证循环次数大于1。
3.3 animation-play-state
值：running，pause用于设置暂停和播放。
3.4 animation-fill-mode
用于设置动画开始前和结束后的状态样式。
none（默认值）开始前和结束后都保持原状。
forwards，动画结束后保持最后一帧的状态。如果没有设置最后一帧，则最后一帧默认为原始状态。
backwards，动画开始前保持第一帧的样式，只在animation-delay期间有效果。
这个“第一帧”视动画方向而定，如果是正向，则“第一帧”为0%帧，如果是反向，则“第一帧”为100%帧。
both，同时应用forwards和backwards规则。
更多细节可参见：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode