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>

回答1:

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.

来源：https://stackoverflow.com/questions/15696800/css3-scale-fade-and-spin-on-the-same-element-why-isnt-scale-working

标签

css3

scale

css-transforms

css-animations