CSS动画（animation与keyframes）

animation

1
animation: name duration timing-function delay iteration-count direction;
属性名 中文名 值
animation-name keyframe名称 /
animation-duration 持续时间 (time)
animation-timing-function 速度曲线 linear | ease | ease-in | ease-out |
ease-in-out | cubic-bezier(n,n,n,n)
animation-delay 开始前的延迟 (time)
animation-iteration-count 播放次数 (n) | infinite
animation-direction 是否轮流反向播放 normal | alternate
animation-play-state 指定动画播放或暂停 paused | running

注：

  1. time为时间值默认毫秒为单位，可设置秒为单位（ns）
  2. n表示任意整数

@keyframes

1
2
3
4
5
6
7
8
@keyframes name {
    from {
        color: #fff;
    }
    to {
        color: #000;
    }
}
1
2
3
4
5
6
7
8
@keyframes name {
    0% {
        color: #fff;
    }
    100% {
        color: #000;
    }
}
  • 上面两种效果是等同的

    （可用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”）
  • 0% 是动画的开始，100% 是动画的完成。
  • 避免兼容性问题，应该始终定义 0% 和 100% 选择器