悬停动画答案

【问题标题】：On hover Animation悬停动画
【发布时间】：2020-10-14 18:43:58
【问题描述】：

嗨，我正在制作一个小动画（它在悬停时激活），我想制作它，以便当我将鼠标悬停在我的图标之外时，我希望动画完成直到它结束，而不是制作它看起来像坏了一样，有人知道解决方案吗，我的代码看起来像这样：

.icon {
  &:hover {
       animation: shake 1s ease infinite;
     }
  }

@keyframes shake {
 0% {
   transform: rotate(0deg);
 }

 50% {
   transform: rotate(30deg);
 }

 100% {
   transform: rotate(0deg);
 }
}

【问题讨论】：

你的动画没有尽头。您已将其设置为无限次重复。请澄清你的问题。另外，如果我明白我认为您想要什么，解决方案将需要使用 JS，您是否可以接受，或者您是否正在寻找纯 CSS 的解决方案？
我希望它在悬停时重复无限次是的，但是是否有可能让它回到开始或结束，或者实际上完成一个 cicle 让我们说只用 CSS
对不起@pretzelhammer 我不得不提你之前我可以更清楚是的，我必须回去寻找动画 p.s.看看这里的评论
我认为纯 CSS 的解决方案是不可能的，我认为您必须为此使用 JS。
非常感谢@pretzelhammer 继续努力

标签： css animation hover

【解决方案1】：

试试这个

animation: shadow-img 1s linear 2 alternate forwards;

【讨论】：