如何自动启动关键帧动画

Question

我今天正在 html css 进行第一次体验。我在这里创建了一个悬停时触发的动画。现在我希望动画在没有悬停的情况下大约 5 秒后自行触发。我必须如何在这里进行才能实现此目标？

感谢您的帮助！

<html lang="en">
  <head>
    <title>Shake</title>
    <style>

    .shake:hover {
      animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      perspective: 1000px;
    }

    @keyframes shake {
      10%, 90% {
        transform: translate3d(-2px, 0, 0);
      }
  
      20%, 80% {
        transform: translate3d(4px, 0, 0);
      }

      30%, 50%, 70% {
        transform: translate3d(-8px, 0, 0);
      }

      40%, 60% {
        transform: translate3d(7px, 0, 0);
      }
    }
    </style>
  </head>
  <body>
    <div class="shake">Shake</div>
  </body>
</html>

Answer 1

可以使用animation-delay属性。这将在页面元素显示5秒后执行动画。

.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  animation-delay: 5s;
}

Answer 2

您可以从 css 中删除 :hover 伪 class 并添加 animation-delay 属性 5 秒（或任何您想要的延迟）。

 .shake {
      animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      perspective: 1000px;
      animation-delay: 5s
    }

    @keyframes shake {
      10%, 90% {
        transform: translate3d(-2px, 0, 0);
      }
  
      20%, 80% {
        transform: translate3d(4px, 0, 0);
      }

      30%, 50%, 70% {
        transform: translate3d(-8px, 0, 0);
      }

      40%, 60% {
        transform: translate3d(7px, 0, 0);
      }
    }

<html lang="en">
  <head>
    <title>Shake</title>
  </head>
  <body>
    <div class="shake">Shake</div>
  </body>
</html>

如何自动启动关键帧动画

How to start an keyframe animation automatically

html

css

css-animations

keyframe