java 暂停 wait_使用WAIT暂停和循环CSS动画！ 动画化

纯CSS动画可以做很多事情，但是当前的W3规范无法暂停和循环播放动画 。

但是有了WAIT之类的免费工具！ 制作动画时，您实际上可以从头开始创建循环的动画，每个循环之间可以自定义延迟 。 这看似平凡的任务，但它解决了许多开发人员的难题。

应当注意，有一个CSS属性称为animation-delay ，它会延迟CSS animation的开始 。 但是，它不会影响重复的动画，因为它只会延迟起点。

等待！ Animate 自动计算需要在自定义动画关键帧中放置多少停顿才能创建循环之间所需的确切停顿持续时间 。 这可以手工完成，但是非常复杂，更不用说超级烦人了。

该Web应用程序可以使用任何CSS3动画功能 ，包括旋转和变换。 您不是在编写任何新CSS属性，而是在关键帧功能之上构建以基于动画中的百分比 （从0％到100％）创建暂停 。

查看主页 ，查看一些实际的示例 。 很清楚您可以做什么，并且源代码就可以复制/粘贴到您自己的工作中。

请注意，这不是一个成熟的库 。 它是一个生成器， 可根据您需要的动画延迟来即时创建CSS代码 。

如果您想在现场外获得更简单的解决方案，则可以下载Sass mixin 。 这有点棘手，因为它需要一个Sass map ，因此您需要了解如何添加自定义属性并正确编写语法。

这是一个如何调用mixin的示例：

@include waitAnimate(
  (
    animationName: animName,
    keyframes: (
      0: (
        transform: scale(1),
        background-color: blue
      ),
      50: (
        transform: scale(2),
        background-color: green
      ),
      100: (
        transform: scale(3),
        background-color: red
      )
    ),
    duration: 2,
    waitTime: 1,
    timingFunction: ease,
    iterationCount: infinite
  )
);

专业的Web开发人员应该毫无问题地学习绳索并将其构建为可重用的mixin。 但是，新手开发人员可能很难使其正常运行，因此无法开发Web应用程序。

如果您想在本地下载副本，那么所有这些源代码都可以在GitHub上免费获得。 但这是一个很奇怪的功能，因此它在许多项目中都不是您所需要的。 这就是为什么等待！ Animate Web应用程序应该足以帮助您解决 使用纯CSS延迟循环动画 的一次性问题 。

这是一个非常有趣的hack，在设计上也相当晦涩。 但是它展示了CSS3的强大功能和一些独创性。

翻译自: https://www.hongkiat.com/blog/wait-animate/