Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

letting css3 animation play through even when hover off?

letting css3 animation play through even when hover off?

Problem

I have a small menu logo wiggle on my site when you hover over it. it looks really good but ideally id love to make the animation play all the way through first. this is what im using:

http://daneden.me/animate/

heres my code:

js

$(function() {
    $('.logo').hover(function(){$(this).addClass('animated swing')},function(){$(this).removeClass('animated swing')});
});

css3

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

@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(15deg); }   
    40% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(5deg); }    
    80% { -webkit-transform: rotate(-5deg); }   
    100% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes swing {
    20% { -moz-transform: rotate(15deg); }  
    40% { -moz-transform: rotate(-10deg); }
    60% { -moz-transform: rotate(5deg); }   
    80% { -moz-transform: rotate(-5deg); }  
    100% { -moz-transform: rotate(0deg); }
}

@-ms-keyframes swing {
    20% { -ms-transform: rotate(15deg); }   
    40% { -ms-transform: rotate(-10deg); }
    60% { -ms-transform: rotate(5deg); }    
    80% { -ms-transform: rotate(-5deg); }   
    100% { -ms-transform: rotate(0deg); }
}

@-o-keyframes swing {
    20% { -o-transform: rotate(15deg); }    
    40% { -o-transform: rotate(-10deg); }
    60% { -o-transform: rotate(5deg); } 
    80% { -o-transform: rotate(-5deg); }    
    100% { -o-transform: rotate(0deg); }
}

@keyframes swing {
    20% { transform: rotate(15deg); }   
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }    
    80% { transform: rotate(-5deg); }   
    100% { transform: rotate(0deg); }
}

.swing {
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    -moz-animation-name: swing;
    -ms-animation-name: swing;
    -o-animation-name: swing;
    animation-name: swing;
}     
Problem courtesy of: Tallboy

Solution

If you know how long the animation takes, you could do this:

$(function() {
    $('.logo').hover(function(){
        $(this).addClass('animated swing');
        setTimeout(function() {
            $(this).removeClass('animated swing');
        }, ...);
    });
});
Solution courtesy of: Cameron Martin

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

letting css3 animation play through even when hover off?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×