在做前端的时候，难免会遇到需要用动画的需求。

思考

由于没有相关属性直接定义，就只能使用间接的方式了。就把间隔的时间也加到动画的时间里面。

代码

定义一个间隔3秒的动画简单代码如下

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
@keyframes redpack {
    0% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(0);
    }
    79% {
        transform: translateY(5rpx);
    }
    82% {
        transform: translateY(-20rpx);
    }
    84% {
        transform: translateY(0rpx);
    }
    87% {
        transform: translateY(-30rpx);
    }
    89% {
        transform: translateY(0rpx);
    }
    92% {
        transform: translateY(-20rpx);
    }
    94% {
        transform: translateY(0rpx);
    }
    97% {
        transform: translateY(-10rpx);
    }
    100% {
        transform: translateY(0rpx);
    }
}

总结

把间隔的时间也算到动画的时间之内，这样动画就有了自己的间隔时间，达到了间隔时间执行动画的需求了。写代码要时刻保持思考啊！