Css3 scale animation not working

Question

This is the css that i have,

div {
    background-image: url(some url);
    width:100px;
    height:100px;
    background-size:cover;
}

.animate {
    animation:changeSize 3s 1;
}
@keyframes changeSize {
    0% {transform: scale(1);}
    65% {transform: scale(1.2);}
    100% {transform: scale(1.4);}
}

And with Jquery while clicking on a button i am just toggling the class animate to the div. But it seems not working. I am new to css3 animations and i dont know how to debug this. Any clues would be helpful for me in this context.

DEMO

Answer 1

Hi its working fine only on firefox and you has to add vendor prefix for webkit browser

@-webkit-keyframes

here it is

@keyframes changeSize {
    0% {transform: scale(1);}
    65% {transform: scale(1.2);}
    100% {transform: scale(1.4);}
}
@-webkit-keyframes changeSize {
    0% {transform: scale(1);}
    65% {transform: scale(1.2);}
    100% {transform: scale(1.4);}
}

check the fiddle Fiddle

and add transition to the div you needed.

Answer 2

You may play with css3 animation fill property

.animate {
    animation:changeSize 3s 1 forwards;
}

please find jsfiddle link http://jsfiddle.net/FLG4D/16/

here I have played with "backanimate" class as well so toggle back will be smooth as well

similar question Can't stop css animation disappearing after last key frame

Hope it helps!