在做前端的时候，难免会遇到需要用动画的需求，之前也是写过一些需要用到动画的地方，但是之前写的动画都是一直动的，没有间隔多少时间在动。这次接到一个需求是需要间隔一段时间执行动画，当时找了下样式，没有这个属性，可能是自己做的动画少，然后就百度一下，找到了一个方法，在此记录一下。

思考

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

代码

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

  1. @keyframes redpack {
  2.     0% {
  3.         transform: translateY(0);
  4.     }
  5.     75% {
  6.         transform: translateY(0);
  7.     }
  9.     79% {
  10.         transform: translateY(5rpx);
  11.     }
  12.     82% {
  13.         transform: translateY(-20rpx);
  14.     }
  15.     84% {
  16.         transform: translateY(0rpx);
  17.     }
  18.     87% {
  19.         transform: translateY(-30rpx);
  20.     }
  21.     89% {
  22.         transform: translateY(0rpx);
  23.     }
  24.     92% {
  25.         transform: translateY(-20rpx);
  26.     }
  27.     94% {
  28.         transform: translateY(0rpx);
  29.     }
  30.     97% {
  31.         transform: translateY(-10rpx);
  32.     }
  33.     100% {
  34.         transform: translateY(0rpx);
  35.     }
  36. }

总结

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