css - 如何在悬停时及时摇动图像

Question

我想在用户位于图像上方时(悬停效果)每 5 秒摇动图像。我的代码:

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

/*
.opona {
  -webkit-animation-name: shake;
  -webkit-animation-duration: 5s;
  -webkit-animation-delay: 0.82s;
}
*/

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

<div class="opona">
  <img src="https://www.firestonetire.com/content/dam/bridgestone/consumer/fst/tire-images/Firehawk%20AS/FST_Firehawk_AS.jpg/_jcr_content/renditions/original" alt="" width="50px">
</div>

当我从 .opona 中删除评论时，效果不起作用。感谢您的帮助。

Answer 1

在这种情况下，您希望动画持续10.82s，而“移动”部分只需要0.82s 因此在重复之前留下 10s 间隙。为此，您只需对定义的 @keyframes %s 进行一些调整。

0.82/10.82 = ~7.6%，即 “移动” 部分仅占 7.6% 的动画-持续时间。

因此，要更新 %，只需将当前 值 乘以 0.076:

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

@keyframes shake {
  .76%, 6.84% {transform: translate3d(-1px, 0, 0)}
  1.52%, 6.08% {transform: translate3d(2px, 0, 0)}
  2.28%, 3.8%, 5.32% {transform: translate3d(-4px, 0, 0)}
  3.04%, 4.56% {transform: translate3d(4px, 0, 0)}
}

<div class="opona">
  <img src="https://www.firestonetire.com/content/dam/bridgestone/consumer/fst/tire-images/Firehawk%20AS/FST_Firehawk_AS.jpg/_jcr_content/renditions/original" alt="" width="50px">
</div>