详解 CSS3 animation 8个 动画属性
@keyframes：关键帧
-
from：等价于 0%、to：等价于 100%。 -
<percentage>：动画序列中触发关键帧的时间点，使用百分值来表示。
多种写法：
@keyframes show1 {
0% {
top: 0;
}
50% {
top: 30px;
left: 20px;
}
50% {
top: 10px;
}
100% {
top: 0;
}
}
@keyframes show2 {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
/* from 或者 to也可忽略只写一个 */
}
@keyframes show3 {
from {
margin-top: 50px;
}
50% {
margin-top: 150px !important;
}
/* 忽略 */
to {
margin-top: 100px;
}
}
1. 调用动画 animation-name 用来调用 @keyframes 定义好的动画
-
none：默认值，没有任何动画效果 -
<ident>：“@keyframes”定义的动画名称
2. 完成所需时间 animation-duration
-
<time>：一个动画周期的时长，默认值为 0s，表示无动画，单位为秒 (s) 或者毫秒 (ms)，无单位值无效
3. 运动曲线 animation-timing-function
-
linear：线性匀速 -
ease：低速-加速-低速 -
ease-in：低速开始 -
ease-out：低速结束 -
ease-in-out：低速开始和结束 -
cubic-bezier(n，n，n，n)：以上的属性值都是基于此演变的
4. 开始时间 animation-delay
-
<time>：什么时候开始动画，单位为秒 (s) 和毫秒 (ms)，单位为秒 (s) 或者毫秒 (ms)，无单位值无效
5. 播放次数 animation-iteration-count
-
infinite：无限循环播放动画 -
<number>：动画播放的次数，默认值为1
6. 结束后是否逆向播放 animation-direction
-
normal：默认值。动画应该正常播放 -
alternate：动画应该轮流反向播放。 -
reverse：反向运行动画 -
alternate-reverse：反向交替，第一次运行时是反向的，然后下一次是正向
7. 结束状态 animation-fill-mode
-
none：默认值。不设置对象动画之外的状态 -
forwards：设置对象状态为动画结束时的状态 -
backwards：设置对象状态为动画开始时的状态 -
both：设置对象状态为动画结束或开始的状态
8. 播放状态，animation-play-state (无法简写)
-
running：当前动画正在运行。 -
paused：当前动画已被停止。
简写形式：
// animation: name duration timing-function delay iteration-count direction fill-mode;
// 属性值的顺序是可以打乱的
animation: move 2s linear 2s 999 alternate forwards ;
