CSS3 Scale，Fade和Spin在同一元素上（为什么SCALE不起作用？！？）

本文介绍了CSS3 Scale，Fade和Spin在同一元素上（为什么SCALE不起作用？！？）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

好的菜鸟。在动画开始时（旋转时）需要一次使该圆圈缩放和淡入，此后继续旋转。没那么难吧！？！淡出和旋转正常工作，但缩放只是拒绝工作！

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!

某处有胖手指吗？在我撕掉剩下的头发之前，请 露出我的笨拙以及SCALE为什么不起作用 ？谢谢，仅此而已。

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...

最新的 FF 。 （懒惰地为其他所有代码编写代码。）

<!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>

推荐答案

这是因为 -moz- transform：rotate（）覆盖 -moz-transform：scale（）。他们需要在一起

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

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

关于如何使其旋转和缩放以及然后旋转，您将需要再创建一个 @keyframes

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

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

仅供参考，您的 -moz- animation-fill-mode 规则对我来说是第三个动画：不确定为什么，删除它似乎可以正常工作。

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

这篇关于CSS3 Scale，Fade和Spin在同一元素上（为什么SCALE不起作用？！？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！