html - css animation+transition 每 10 秒触发一次并且在悬停时触发

Question

我正在使用这段代码每 10 秒触发一次 css 动画

@keyframes tada_9122 {
      0% { transform: scale(1) }
      0.63291% { transform:scale(.9) rotate(-2deg) }
      1.26582% { transform:scale(.9) rotate(-1deg) }
      1.89873% { transform:scale(1.1) rotate(2deg) }
      2.53165% { transform:scale(1.1) rotate(-1deg) }
      3.16456% { transform:scale(1.1) rotate(2deg) }
      3.79747% { transform:scale(1.1) rotate(-1deg) }
      4.43038% { transform:scale(1.1) rotate(1deg) }
      5.06329% { transform:scale(1) rotate(0) }
      100% { transform:scale(1) rotate(0) }
    }
    
    .callToAction {
      animation: tada_9122 10s linear infinite;
      transform-origin: 50% 50%;
    }

<div class="callToAction" style="width:100px;height:100px;background-color:red;">

</div>

但是我怎样才能在悬停 .callToAction 时触发相同的动画呢？

这行不通:

.callToAction:hover {
  animation: tada_9122 10s;
  transform-origin: 50% 50%;
}

Answer 1

解决方案是用另一个名称创建另一个关键帧并在悬停时使用

@keyframes tada_9122 {
  0% {
    transform: scale(1)
  }
  0.63291% {
    transform: scale(.9) rotate(-2deg)
  }
  1.26582% {
    transform: scale(.9) rotate(-1deg)
  }
  1.89873% {
    transform: scale(1.1) rotate(2deg)
  }
  2.53165% {
    transform: scale(1.1) rotate(-1deg)
  }
  3.16456% {
    transform: scale(1.1) rotate(2deg)
  }
  3.79747% {
    transform: scale(1.1) rotate(-1deg)
  }
  4.43038% {
    transform: scale(1.1) rotate(1deg)
  }
  5.06329% {
    transform: scale(1) rotate(0)
  }
  100% {
    transform: scale(1) rotate(0)
  }
}

@keyframes tada_9122_2 {
  0% {
    transform: scale(1)
  }
  0.63291% {
    transform: scale(.9) rotate(-2deg)
  }
  1.26582% {
    transform: scale(.9) rotate(-1deg)
  }
  1.89873% {
    transform: scale(1.1) rotate(2deg)
  }
  2.53165% {
    transform: scale(1.1) rotate(-1deg)
  }
  3.16456% {
    transform: scale(1.1) rotate(2deg)
  }
  3.79747% {
    transform: scale(1.1) rotate(-1deg)
  }
  4.43038% {
    transform: scale(1.1) rotate(1deg)
  }
  5.06329% {
    transform: scale(1) rotate(0)
  }
  100% {
    transform: scale(1) rotate(0)
  }
}

.callToAction {
  animation: tada_9122 10s linear infinite;
  animation-delay: 1s;
  transform-origin: 50% 50%;
}

.callToAction:hover {
  animation: tada_9122_2 10s linear infinite;
  transform-origin: 50% 50%;
}

<div class="callToAction" style="width:100px;height:100px;background-color:red;">

</div>