css3动画

# animation

# 使用

先定义动画

@keyframes move {
    /*开始*/
    0% {
        transform: translate(0px,0px);
    }
    /*结束*/
    100% {
        transform: translate(100px,0px);
    }
}

1
2
3
4
5
6
7
8
9
10

使用动画

.demo-move {
        animation: move;
    }

1
2
3

# 属性

 /* 动画名称 */
        animation-name: move;
        /* 持续时间 */
         animation-duration: 2s; 
        /* 运动曲线 */
         animation-timing-function: ease; 
        /* 何时开始 */
        animation-delay: 1s;
        /* 重复次数  iteration 重复的 conut 次数  infinite  无限 */
         animation-iteration-count: infinite; 
        /* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate */
         animation-direction: alternate; 
        /* 动画结束后的状态 默认的是 backwards  回到起始状态 我们可以让他停留在结束状态 forwards */
         animation-fill-mode: forwards; 
         animation: name duration timing-function delay iteration-count direction fill-mode; 
         animation: move 2s linear 0s 1 alternate forwards; 
        /* 前面2个属性 name  duration 一定要写 */
         animation: move 2s linear  alternate forwards;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上次更新: 2023/01/29, 11:01:00

← css3之2D转换 css3扩展 →