0

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?

lonewarrior556
  • 3,917
  • 2
  • 26
  • 55
  • An animation always overrides the *static* properties. selector specifity (including !important) doesn't play a role here. – vals Oct 26 '16 at 19:43
  • Related - http://stackoverflow.com/questions/34984456/transform-scale-working-on-chrome-but-not-on-firefox/34985268#34985268. – Harry Oct 27 '16 at 04:36

2 Answers2

1

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.

Jake Taylor
  • 4,246
  • 3
  • 15
  • 16
0

First at you code your don't close '}' in .fadeInLeftBig.

look at this fiddle:

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

and 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/

Kamil Powroźnik
  • 75
  • 7