hooyantsing's Blog

P210_2_animation关键帧使用和介绍

字数统计: 113阅读时长: 1 min
2020/04/24

P210 2 animation关键帧使用和介绍

@keyframes

定义帧动画

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
//form开始 to结束 hd可自定义动画名
@keyframes hd {
    from {
        background: blue;
    }
    to {
        background: red;
    }
}

//自定义
@keyframes hd {
    0% {
        background: blue;
    }
    25% {
        transform: scale(2);
    }
    75% {
        transform: scale(1);
    }
    100% {
        background: red;
    }
}

animation-name

引用帧动画,参数动画名。

1
animation-name: hd;

animation-duration

帧动画整体过渡效果总用时

类比记忆:transition-duration

1
animation-duration: 2s;
CATALOG