定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值： none 0 ease 0 1 normal
继承性： no
版本： CSS3
JavaScript 语法： object.style.animation=”mymove 5s infinite”

属性

属性 描述 值
@keyframes 使用@keyframes可以规定动画
animation-name 规定动画的名称 keyframename
animation-duration 规定动画完成一个周期花费的秒或毫秒 time
animation-timing-function 规定动画的速度曲线 linear / ease / ease-in / ease-out / ease-in-out
animation-delay 规定动画在启动前的延迟间隔 time
animation-iteration-count 规定动画的播放次数 n / infinite
animation-direction 规定动画是否在下一个周期反向播放 normal / reverse / alternate / alternate-reverse
animation-fill-mode 规定当动画不播放时，要应用到元素的样式 none / forwards / backwards / both
animation-play-state 规定动画播放状态，正在运行或暂停 running / paused

animation-name

值 描述
keyframename 规定需要绑定到选择器的 keyframe 的名称。
none 规定无动画效果（可用于覆盖来自级联的动画）。

animation-duration

值 描述
time 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

animation-timing-function

值 描述 测试
linear 动画从头到尾的速度是相同的。 测试
ease 默认。动画以低速开始，然后加快，在结束前变慢。 测试
ease-in 动画以低速开始。 测试
ease-out 动画以低速结束。 测试
ease-in-out 动画以低速开始和结束。 测试
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay

值 描述
time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。

animation-iteration-count

值 描述
n 定义动画播放次数的数值。
infinite 规定动画应该无限次播放。

animation-direction

值 描述
normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。

animation-fill-mode

值 描述
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。
both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

animation-play-state

值 描述
paused 指定暂停动画
running 指定正在运行的动画

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<body>
    <div class="circle"></div>
    <div class="cube"></div>
</body>
</html>

<style>
    .circle{
        border-radius: 100%;
        background-color: blueviolet;
        width: 100px;
        height: 100px;
        animation: move 1s ease-in 0s infinite alternate;
    }

    .cube{
        margin-left: 150px;
        background-color: black;
        width: 100px;
        height: 100px;
        animation: move-x 2s ease-in 0s infinite alternate-reverse;
    }

    /* 鼠标经过动画停止 */
    .cube:hover{
        animation-play-state: paused;
    }

    /* 规定动画move是由上到下 */
    @keyframes move{
        0% {
            transform: translate(0 , 0);
        }
        100%{
            transform: translate(0 , 400px);
        }
    }

    /* 规定动画move-x是由左到右 */
    @keyframes move-x {
        0%{
            transform: translate(0,0);
        }
        100%{
            transform: translate(400px,0);
        }
    }

</style>