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-08 11:56:52Z

2

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">

edited Feb 8, 2015 at 11:56

answered Feb 8, 2015 at 11:47

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Feyisayo Sonubi Over a year ago

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

Vucko Over a year ago

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{...}

Feyisayo Sonubi Over a year ago

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 Over a year ago

Oh I've added it now, but it still doesn't animate when hovered. here

Vucko Over a year ago

You have to learn basic CSS and how the selectors work - here is your fiddle. You have the same styles for .swing and .swing:hover, which isn't good.

Collectives™ on Stack Overflow

CSS: Animate an element on hover

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related