同一个元素上的 CSS3 Scale、Fade 和 Spin（为什么 SCALE 不起作用？！？）答案

【问题标题】：CSS3 Scale, Fade and Spin on the same element (why isn't SCALE working?!?)同一个元素上的 CSS3 Scale、Fade 和 Spin（为什么 SCALE 不起作用？！？）
【发布时间】：2013-03-29 03:19:21
【问题描述】：

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

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

仅限最新 FF。 （懒得为其他所有东西编写代码。）

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>

【问题讨论】：

标签： css scale css-transforms css-animations

【解决方案1】：

这是因为-moz-transform:rotate() 覆盖了-moz-transform:scale()。他们需要在一起

jsFiddle

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

至于如何让它旋转和缩放然后只是旋转，你需要再做一个@keyframes

jsFiddle

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

仅供参考，您的-moz-animation-fill-mode 规则对我来说破坏了第三个动画：s 不知道为什么，删除它似乎工作正常。

【讨论】：

老兄！你摇滚！谢谢！
等一下！我需要旋转不要在比例和第二个旋转动画之间停止。那么我们需要 3 个旋转动画吗？
这是因为cubic-bezier(0.230, 1.000, 0.320, 1.000)，不幸的是，他们需要在同一个动画上并共享相同的时间。你必须使用一个更自然地流入transformAnim 的linear 时间的时间，例如ease-in 或linear。