Search code examples
cssscalecss-transformscss-animations

CSS3 Scale, Fade and Spin on the same element (why isn't SCALE working?!?)

OK noobs. Need this circle to scale and fade in once at the beginning of the animation (while spinning) and continue to spin thereafter. Not that hard right!?! Got the fade and spin working but scale just refuses to work!

Is there a fat finger somewhere? Before I rip out what hair I have left, please expose my noobness and why SCALE is not working? Thank you, that is all...

Latest FF only. (To lazy to code for everything else.)

JS Fiddle EXAMPLE

<!DOCTYPE html>
<html>
<head>
<style> 
div
{width: 100px;
height: 100px;
background: transparent;
border: solid 10px blue;
border-radius: 50%;
border-top: solid 10px transparent;
border-bottom: solid 10px transparent;

-moz-animation-name: scaleIn,fadeIn,spin;
-moz-animation-duration: 1s,1s,1s;
-moz-animation-timing-function: ease-in,ease-in,linear;
-moz-animation-delay: 0,0,0;
-moz-animation-iteration-count: 1,1,infinite;
-moz-animation-direction: normal,normal,normal;
-moz-animation-fill-mode: forwards,forwards,forwards;
-moz-animation-play-state: running,running,running;}

@-moz-keyframes scaleIn
{
from    {-moz-transform: scale(2);}
to      {-moz-transform: scale(1);}
}

@-moz-keyframes fadeIn
{
from   {opacity: 0.0;}
to     {opacity: 1.0;}
}

@-moz-keyframes spin
{
from  {-moz-transform: rotate(0deg);}
to    {-moz-transform: rotate(360deg);}
}

</style>
</head>
<body>
<div></div>
</body>
</html>
Solution

  • It's because -moz-transform:rotate() is overriding -moz-transform:scale(). They need to be together

    jsFiddle

    @-moz-keyframes transformIn {
    from {
        -moz-transform: scale(2) rotate(0deg);
    }
    to {
        -moz-transform: scale(1) rotate(360deg);
    }
}

    As for how to get it to rotate and scale and then just rotate, you will need to make another @keyframes

    jsFiddle

    @-moz-keyframes transformAnim {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform:  rotate(360deg);
    }
}

    FYI your -moz-animation-fill-mode rule was breaking the 3rd animation for me :s not sure why, remove it seems to work fine.