Css 多个动画后悬停状态不工作

我有点被难住了

这个悬停状态变换在我有一个动画时起作用，现在我添加了第二个动画，它停止工作了吗

.right-bird {
  height: 58px;
  position: relative;
  top: -26px;
  left: -80px;
  opacity: .8;
  -webkit-animation: bird-from-right 1.9s linear, jiggy 4s ease 2.5s forwards;
  z-index: 50;
  max-width: 100%;
  &:hover {
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
  } 
}

---

有什么想法/建议吗？

我知道你的动画是如何工作的

但是：在抖动动画和悬停状态下使用旋转。在这种情况下，悬停旋转可以在悬停时替换动画

---

顺便说一句，为了举例说明跨浏览器的Sass和CSS动画，您应该将它们放在JSFIDLE中，而不是放在JSFIDLE中。在Codepen，您已经拥有了一个Sass编译器并包含在内，否则调试代码会变得更加复杂。

如果您将其显示为一个小提琴，我想我将能够提供帮助！不是最棒的小提琴，但你能抓住重点@jared如果你同意答案，点击复选标记符号接受就好了。看见