applying same css to an element more than once

Problem

I want give same CSS property to one element more than one. for example when mouse is on element it's scale change to 1.5 and after .2s it's scale changed to 1.2. i try:

-moz-transform:scale(1.5);
-moz-transition:1s ease-in-out;
-moz-transform:scale(1.2);

but it not working and only it scale changed to 1.2. is it possible?

Problem courtesy of: Mahdi_Nine

Solution

This can be achieved using keyframes.
JsFiddle: http://jsfiddle.net/dUsep/

@-moz-keyframes myanimation {
from { -moz-transform:scale(1.5);}
to {-moz-transform:scale(1.2);}
}


.mybox:hover{
    -moz-animation: myanimation 1s;
}
Solution courtesy of: Raj Nathani

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.