CSS3 Scale transform animation with JS
HTML
<button>button</button>
CSS
@keyframes "bounce-button" {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes bounce-button {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes "bounce-button" {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes "bounce-button" {
0% {
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-ms-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-ms-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes "bounce-button" {
0% {
-o-transform: scale(1);
transform: scale(1);
}
50% {
-o-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-o-transform: scale(1);
transform: scale(1);
}
}
.animate-button {
-webkit-animation: bounce-button 1s 0 linear 1;
-moz-animation: bounce-button 1s 0 linear 1;
-ms-animation: bounce-button 1s 0 linear 1;
-o-animation: bounce-button 1s 0 linear 1;
animation: bounce-button 1s 0 linear 1;
}
JavaScript
$('button').click(function() {
var $btn = $(this);
$btn.addClass('animate-button');
// restart animation
// http://jsfiddle.net/leaverou/xK6sa/
var me = this;
this.style.webkitAnimation = 'none';
this.style.mozAnimation = 'none';
this.style.msAnimation = 'none';
this.style.animation = 'none';
setTimeout(function() {
me.style.webkitAnimation = '';
this.style.mozAnimation = '';
this.style.msAnimation = '';
this.style.animation = '';
}, 10);
});