I've created a CSS3 animation test that adjusts the background-size of an element to create a pulsating effect when clicked, toggling the 'active' class and triggering a transition. However, I'm facing an issue where the animation stops working once the '.active' class is removed because I've reset the animation to none. Can anyone help me solve 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/