2

html を使用した単純な CSS3 アニメーション (例)

<div class="parent">
    <a href="#">First</a>
    <a href="#">Second</a>
    <a href="#">Third</a>
</div>

とCSS

@-webkit-keyframes anim{
    0% {color:blue}
    10% {color:red}
}
.parent a {
    color:black;
    -webkit-animation: anim 3s infinite;
}

色の変更はすべて、すべての子に一度に適用されます。各子の色を1つずつ変更することはできますか?

つまり、他の子を一時停止して 1 つの子のアニメーションを実行してから、次の子を一時停止して実行する必要があります。これは、一度に 1 つの子だけがアニメーション化されることを意味します。

子の数は不明であり、サイクル全体ではなく、1 つの子のアニメーション期間を割り当てる必要があることに注意してください。

4

2 に答える 2

1

http://jsfiddle.net/AE7tj/これは、アニメーション遅延のバリアントです。

@mddwが言ったように、それは可能ですが、既知の数の子供がいます。誰もが独自のアニメーション遅延を必要とするため、アニメーションはすべての子に適用する必要があります。

また、アニメーションを無限に実行したい場合は、実際にはすべての時間をカバーするために animation-duration が必要です。アニメーション遅延は、アニメーションの最初の実行にのみ適用され、反復間では適用されません。

私は持っている：

0% {color:blue}
33% {color:red}
66% {color: black}
100% {color: black}

アニメーションの持続時間は 9 秒です。これは、最初からおおよそまでということを意味します。3 秒目で色が青から赤に変わり、3 番目から 6 番目の色が赤から黒に変わり、アニメーションの最後まで黒のままになります。

于 2013-02-21T02:26:20.850 に答える
1

これはそのままの CSS ではできません。(ただし、将来的には CSS 変数が利用可能になる可能性があります。現在は実験的なものにすぎません)

しかし、LESS または SASS を使用して何か (あまり美しくない) を作成することはできます (以下の例)。注: これは、そこに存在する可能性のある a の最大量がわかっている場合にのみ実行できます。

@for $i from 1 through 19 {
    .parent a:nth-child(#{$i}) { -webkit-animation-duration: $1s; }
}

推奨される解決策: そうしたくない場合は、Javascript を使用してください。次のように簡単です。

$.each($('.parent a'), function(index, elem) {
    $(elem).css('-webkit-animation-duration', index + 's');
});
于 2013-02-19T07:29:08.200 に答える