1

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

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

仅限最新的FF。（懒得为其他一切编写代码。）

JS 小提琴示例

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

1 回答 1

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 不知道为什么，删除它似乎工作正常。

于 2013-03-29T03:25:36.020 回答