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

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

＆＃13;

@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%;
}

＆＃13;

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

＆＃13;

Answer 2

诀窍是将div callToAction置于另一个div中，并使用某个类parent_callToAction并在悬停时为其提供动画。

<div class="parent_callToAction">
   <div class="callToAction"></div>
</div>

另外，给div设置相同的维度

 .callToAction, .parent_callToAction{
        width:100px;
        height:100px;
        background-color:red;
    }

这里是 SNIPPET

＆＃13;

@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 ease infinite;
      transform-origin: 50% 50%;
    }
    
    .parent_callToAction:hover{
      animation: tada_9122 10s linear infinite;
      transform-origin: 50% 50%;
    }
    
    .callToAction, .parent_callToAction{
        width:100px;
        height:100px;
        background-color:red;
    }

＆＃13;

<div class="parent_callToAction">
   <div class="callToAction"></div>
</div>

＆＃13;

Answer 3

它将无法工作，因为您在类上运行动画无限，并且在您调用.callToAction的父类上每10秒运行一次动画，因此它像往常一样每10秒在父级上运行动画，而不是在同一个动画中运行其他动画当你将鼠标悬停在同一个班级时，它已经有了动画，

解决方案：您可以删除父级动画并仅在.callToAction上运行动画：hover，它将成功运行，或

css动画+转换每10秒触发一次定时和悬停

3 个答案: