风动之石的博客

技巧和坑

animation-timing-function

animation-timing-function作用于动画的每一个关键帧周期，而不是整个动画周期。

div {
    animation: 2s ease-in infinite scale;
}

@keyframes scale {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(.5);
    }
    100% {
        transform: scale(1);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

比如，我们设置了animation-timing-function: ease-in，则在0%~50%部分和50%~100%部分会分别应用ease-in，而不是在0%~100%整体应用ease-in。

此外，若是我们想在动画的某一段使用不同的animation-timing-function，可以在该段开始的关键帧上设置新的animation-timing-function:

div {
    animation: 2s ease-in infinite scale;
}

@keyframes scale {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(.5);
        animation-timing-function: linear;
    }
    100% {
        transform: scale(1);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

经过这样配置，0%~50%部分将应用ease-in，50%~100%部分将应用linear。

参考文档