8

完全なcss3アニメーションで要素を順番にアニメーション化しようとしています。非常に簡単な答えは、アニメーションの遅延を使用しているようです。しかし、私はこれをループにしたかったのですが、アニメーションを無限にループさせる方法はありますか?

同様の質問でこのフィドルを見つけました。基本的には同じロジックですが、ループさせたかっただけです。

これは同様の[質問]でした（https://stackoverflow.com/a/8294491/340888）

これを使用していました：

@-webkit-keyframes FadeIn { 
0% { opacity:0; -webkit-transform:scale(.1);}
85% {opacity:1; -webkit-transform:scale(1.05);}
100% {-webkit-transform:scale(1); }
}

.myClass img { float: left; margin: 20px; 
    -webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; }
.myClass img:nth-child(1){ -webkit-animation-delay: .5s }
.myClass img:nth-child(2){ -webkit-animation-delay: 1s }
.myClass img:nth-child(3){ -webkit-animation-delay: 1.5s }
.myClass img:nth-child(4){ -webkit-animation-delay: 2s }

編集

明確にするために、最初のアニメーションがアニメーション化された後、2番目のアイテムがアニメーション化され、次に3番目のアイテムがアニメーション化されます。10～12個くらいの要素をアニメーション化することを考えています。そのため、次々とアニメーション化されます。

したがって、@Sonu Joshiの答えは正しくありません。

4

1 に答える 1

6

サイクルが再開する前にすべての要素がアニメーション化されるように、アニメーションを十分に長くする必要があります。

この例では、4 番目の要素は 2 秒後にのみアニメーションを開始します。トランジション自体にはさらに 1 秒かかるため、最初の要素を再アニメーション化する前に、少し一時停止する必要がある場合があります。つまり、合計で 4 秒です。

したがって、次のようなものが必要になる場合があります-webkit-animation: Fadein 4s infinite linear。

ただし、キーフレームのパーセンテージを調整して、それぞれを 4 で割る必要もあります。これは、トランジション自体に 1 秒しかかからないようにするためです。

@-webkit-keyframes FadeIn { 
  0% { opacity:0; -webkit-transform:scale(.1);}
  21.25% {opacity:1; -webkit-transform:scale(1.05);}
  25% {-webkit-transform:scale(1); }
}

フィドルの例

于 2013-04-30T01:47:04.817 に答える