1

OK初心者。この円は、アニメーションの開始時 (回転中) にスケールおよびフェード インし、その後も回転を続ける必要があります。そんなに難しくないですよね！？！フェードとスピンは機能しますが、スケールは機能しません!

どこかに太い指はありませんか？残った髪を引き抜く前に 、私の初心と、なぜ 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()。彼らは一緒にいる必要があります

jsフィドル

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

回転とスケーリングを行ってから回転させる方法については、別のものを作成する必要があります@keyframes

jsフィドル

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

参考までに、あなたの-moz-animation-fill-modeルールは私にとって3番目のアニメーションを壊していました:理由がわからないので、削除するとうまくいくようです。

于 2013-03-29T03:25:36.020 に答える