The css animation-name property does not convert the property

I have the library animate.css loaded on my website and I animate an arrow moving onto the page using "fadeInLeftBig"

My html:

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

My 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);
 }
}

The transform: rotate(90deg) does not work on hover as long as animation-name: fadeInLeftBig is set on the element. But works if you unceck or comment it out.

I can see now there are two transform properties on the element, but Why does setting the animation-name property override the transform property with an !important flag from taking effect?


As vals stated earlier..an animation overrides the static properties. For what you're trying to achieve, you're best bet is to wrap your swipe-button class with a new fadeInLeftBig div:

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

Then use keyframe animations on both divs. This separates your animations so that your "fade in" doesn't start over once you unhover your swipe-button. Here's a working fiddle. https://jsfiddle.net/kj4v36ye/2/ Let me know if you're trying to achieve something else and I can easily modify it.