The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Stop CSS 3 animation

  • # December 20, 2012 at 11:32 am

    So is there a way to kill css3 animation on hover? So that you can apply a different hover state to the animation?

    What I’m trying to do is create a css3 opacity carousel/slider/imagey thingy that lets me kill the animation on hover (this helps with ie8) and let’s me move to transitions.

    Here’s what I’ve got

    It let’s me switch to the other slides, but the animated opacity is still kicking in.

    Thanks internet for any help.

    # December 20, 2012 at 11:46 am

    I don’t think you can do it in css as there is no parent selector.

    Take a look at this i found on jsfiddle.

    That should run it when not in a hover state, and pause all anims when its hovered over.

    # December 20, 2012 at 1:59 pm

    This reply has been reported for inappropriate content.

    Does this work?

    #shape:hover {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;

    # December 20, 2012 at 2:27 pm

    Yep, that did it. but I also had to put important.

    # December 20, 2012 at 2:38 pm

    This reply has been reported for inappropriate content.

    A simple thank you would suffice.

    # December 20, 2012 at 8:12 pm

    I’m such a dingbat, sorry man, I really appreciate the help.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed