Question

我在我的网站上加载了库animate.css，并使用＆＃34; fadeInLeftBig＆＃34;

动画一个箭头移动到页面上

我的HTML：

<div class="swipe-button b-left animated fadeInLeftBig"></div>

我的css：

.swipe-button.b-left {
    left: 10px;
    background-image: url(/images/left-arrow.png);
}

.swipe-button:hover {
    transform: rotate(90deg) !important;
}

Animate.css

.fadeInLeftBig {
    animation-name: fadeInLeftBig;
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }

 100% {
   opacity: 1;
   transform: translateX(0);
 }
}

只要在元素上设置了transform: rotate(90deg)，animation-name: fadeInLeftBig就无法悬停。但是如果你不肯或评论它就会有用。

我现在可以看到元素上有两个transform属性，但是为什么设置animation-name属性会覆盖转换属性并使!important标志生效？

Answer 1

正如前面所说的那样。动画会覆盖静态属性。对于您想要实现的目标，您最好的选择是使用新的fadeInLeftBig div包装您的滑动按钮类：

<div class="fadeInLeftBig animated">
<div class="swipe-button b-left animated"></div>
</div>

然后在两个div上使用关键帧动画。这将您的动画分开，以便您的＆＃34;淡入＆＃34;淡入＆＃34;取消您的滑动按钮后，不会重新开始。这是一个工作小提琴。 https://jsfiddle.net/kj4v36ye/2/如果您正在尝试实现其他目标，请告诉我，我可以轻松修改它。

Answer 2

首先，在您编码时，不要关闭＆＃39;}＆＃39;在.fadeInLeftBig。

看看这个小提琴：

<div class="swipe-button b-left animated fadeInLeftBig"></div>

和css

.swipe-button.b-left {
    left: 10px;
    background-color: blue;
     width: 50px;
  height: 50px;
}

.swipe-button:hover {
    transform: rotate(45deg);
}
.fadeInLeftBig {
    animation-name: fadeInLeftBig;
}
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

https://jsfiddle.net/kj4v36ye/

css animation-name属性不允许转换属性

2 个答案: