CSS: Animate an element on hover

Question

I'm still growing in web development, so I hope this doesn't come out too "noob". I have a logo on a webpage I'd like to animate using a css library when its hovered on.

I'm using Dane Den's Animate.css library to implement the animations and I already enqueued the css in my theme's functions.php file. At first I tried working with only the animation I needed like this:

 @keyframes pulse {
    /*The animations*/
    }

#logo.table-cell img:hover {
   -webkit-animation-name: pulse;
          animation-name: pulse;
}

But this didn't work then I thought of calling the animation class I needed from the library on the logo class and that involved me trying to inherit css classes in a css class which wasn't possible.

This answer used a jquery way of getting it done and seemed like a way out but it didn't work too.

I might not be doing things the right way but I'm using the Custom CSS and JS fields I have with my wordpress site's theme.

Vucko · Accepted Answer · 2015-02-08T11:56:52.987

When I use animate.css, I always copy the required classes and use them like I want to. For your situation:

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.pulse:hover {
  -webkit-animation-name: pulse;
          animation-name: pulse;
}

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

<img class="pulse animated" src="http://www.beer100.com/images/beermug.jpg">

Also, add the infinite class to keep the animation going.

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.pulse:hover {
  -webkit-animation-name: pulse;
          animation-name: pulse;
}

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

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

<img class="pulse animated infinite" src="http://www.beer100.com/images/beermug.jpg">

Thanks! Is it compulsory the name of the animation be the same as the name of the element's class? And how would you recommend I apply it for a wordpress site? The class that holds the logo is `#logo.table-cell img` — Feyisayo Sonubi, Feb 08 '15 at 12:10
No it isn't, you can name them like you want. Give a class to the image and use that, or like you have `#logo.table-cell img:hover{...}` — Vucko, Feb 08 '15 at 12:19
I was able to get the logo to animate on document load by adding `pulse animated` to the `img class` of the logo, but when I hovered, it didn't. .-. — Feyisayo Sonubi, Feb 08 '15 at 12:47
Oh I've added it now, but it still doesn't animate when hovered. [here](http://jsfiddle.net/gLnyLox3/4/) — Feyisayo Sonubi, Feb 08 '15 at 13:41
You have to learn basic CSS and how the selectors work - [here is your fiddle](http://jsfiddle.net/gLnyLox3/5/). You have the same styles for `.swing` and `.swing:hover`, which isn't good. — Vucko, Feb 08 '15 at 14:04

CSS: Animate an element on hover

1 Answers1