每 x 秒运行一次动画，并在开始和每次迭代时延迟答案

【问题标题】：Run animation every x seconds with delay at at begining and every each iteration每 x 秒运行一次动画，并在开始和每次迭代时延迟
【发布时间】：2021-11-29 17:10:15
【问题描述】：

我有一个想要旋转的 HTML 按钮。我需要它在 5 秒后开始旋转。当它开始旋转时，它会旋转 2 秒并停止 5 秒，然后再次开始旋转 2 秒并停止 5 秒，以此类推。我怎样才能做到这一点？我寻找了一些建议，但找不到合适的解决方案。这是我的代码，必须保持 400 毫秒，因为它是旋转的速度：

 #register_event{
   animation: wiggle 400ms 3s 8 ease-out none;
 }


 @keyframes wiggle{
   0%{
     transform: rotateZ(0);
   }

   50%{
     transform: rotateZ(-10deg);
   }

   100%{
     transform: rotateZ(10deg);
  `enter code here` }
 }

【问题讨论】：

400ms 不是速度，是animation-durationMDN

标签： css css-animations

【解决方案1】：

在 2 次运行之间获得延迟的诀窍是插入一个什么都不做的关键帧（在我的示例中为 60%），因此从该点开始的 40% 与 0% 相比没有任何作用。

@keyframes wiggle{
    0%{
        transform: rotateZ(0);
    }
    
    25%{
        transform: rotateZ(-10deg);
    }
    
    50%{
        transform: rotateZ(10deg);
    }
    60%{
        transform: rotateZ(0deg);
    }
}


#register_event{
    animation: wiggle 2s infinite;
    animation-delay: 2s;
}

您会通过动画延迟获得第一个延迟。不要忘记让它无限运行。为了获得正确的持续时间，您可能需要更改关键帧 % 和整个动画的持续时间（只是一些数学运算），但我相信您明白其中的诀窍！

【讨论】：

没有帮助我。
你试过了吗？它在 2 sek 后开始旋转，旋转它，等待一段时间，然后再次开始旋转。好的，我知道，您想要 5sek 和 400ms，但这只是一些数学运算...技巧保持不变...这里有一个适合您的小提琴：jsfiddle.net/v782mt3p

【解决方案2】：

您可以在 CSS 中使用 Infinite 来指定要一次又一次地运行该动画。所以，把你的代码改成这样：

 #register_event{
   animation: wiggle 400ms 3s 8 ease-out none infinite;
 }


 @keyframes wiggle{
   0%{
     transform: rotateZ(0);
   }

   50%{
     transform: rotateZ(-10deg);
   }

   100%{
     transform: rotateZ(10deg);
  }
 }

现在，因为我不知道速记属性animation 的具体顺序，所以试着将infinite 放在一行中。它会完美运行。

【讨论】：