how do I add a custom css3 animation but also a transition on hover?

Question

I have set up a basic CSS3 animation test which increases and decreases the background-size of the element, when you click one of the elements then the class active is toggled and a transition occurs. My problem is though that when the .active class is removed the animation doesnt occur anymore since I have reset animation to none. Can anyone advise how I can fix this problem?

CSS

html{height:100%;}
body {background:#000;height:100%;min-height:100%;padding:20px}
ul{height:100%;display:block}
li{float:left;margin-right:30px;position:relative;}

@-webkit-keyframes throb_outer {
      0% { background-size:1px 100%; }
      100% { background-size:1px 130%; }
}

@-webkit-keyframes throb_inner {
      0% { background-size:1px 100%; }
      100% { background-size:1px 115%; }
}

.outer{display:block;width:50px;padding:0 1px;cursor: pointer;
-webkit-animation: throb_outer 2s infinite alternate;
}

.b{background: -webkit-linear-gradient(black 30%, rgba(41,184,229,1) 50%, black 70%) repeat-x; }
.g{background: -webkit-linear-gradient(black 20%, rgba(33, 130, 61, 1) 50%, black 80%) repeat-x;}
.r{background: -webkit-linear-gradient(black 40%, rgba(255,0,0,1) 50%, black 60%) repeat-x;}

.li{height:100%;-webkit-transition: background-size .3s linear;
    background-position:0 50%;
    background-size:1px 100%;}

.inner{
    width:100%;
    display:block;
        -webkit-animation: throb_inner 2s infinite alternate;
}



.outer.active{-webkit-animation:none;background-size:1px 200%;}
.outer.active .inner{-webkit-animation:none;background-size:1px 150%;}
​

JS

$(document).ready(function() {


    $('#test').children().on('click', function(e) {

        $(this).toggleClass('active');


    });

});

Fiddle here: http://jsfiddle.net/VQaGh/22/

Answer 1

as my understanding you want effects something like this

try this one http://jsfiddle.net/Sk2sX/

I have modify both css and js hope it will help you

for any query regarding code post a comment