让一个动画一直执行的属性是_彻底了解CSS3帧动画

CSS3 中有一个 animation 属性，用它可以创建出帧动画。

animation 属性是下面几个属性的缩写：

1. animation-name 动画的名字；
2. animation-duration 动画执行时间；
3. animation-timing-function 运行动画的函数；
4. animation-delay 延迟多长时间才执行动画，默认是 0；
5. animation-iteration-count 动画执行多少次，默认是 1 次；
6. animation-direction 动画是否反向播放，默认是 normal；
7. animation-fill-mode 动画在执行之前和之后如何将样式应用于其目标，默认是 none；
8. animation-play-state 定义一个动画是否运行或者暂停，默认是 running，表示正在运行。

例如下面的代码：

.box{
    
    margin: 40px;
    height: 100px;
    width: 100px;
    /* 可以一次性指定多个帧动画，每个帧动画用逗号隔开 */
    animation: a1 2.4s infinite,
               a2 1s infinite;
}
@keyframes a1{
    
    from {
    
        transform: rotate(0deg);
    } to {
    
        transform: rotate(360deg);
    }
}
@keyframes a2{
    
    from {
    
        background-color: green;
    } to {
    
        background-color: gold;
    }
}

效果：

animation

animation-name

定义动画名字，它的值可以是：

• none 表示无关键帧。这会使动画失效；
• string 标识动画的字符串，大小写敏感，由字母、数字、_ 或 - 组成。

animation-name 可以指定多个值，每个用 , 隔开，多个值表明有多个帧动画。

animation-duration

动画执行时间，初始值是 0s。单位可以是秒(s) 或者毫秒(ms)，没有单位，值无效。

可以指定多个值，这些值与 animation-name 的值相对应，如果少值，按初始值：0s。

例如：

.box{
    
    height: 100px;
    width: 100px;
    background-color: purple;
    animation-name: a1, a2;
    animation-duration: 1s, 3s;
}
@keyframes a1{
    
    from {
    
        background-color: purple;
    } to {
    
        background-color: gold;
    }
}
@keyframes a2{
    
    from {
    
        height: 100px;
        width: 100px;
    } to {
    
        height: 240px;
        width: 240px;
    }
}

效果如下：

animation-duration

animation-timing-function

定义运行动画的函数，他有以下几种值：

• linear 动画会以恒定的速度从初