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?