0

特定のアニメーションを実現するための助けを探しています。ここで見られる無限に拡大するリングに似たシーケンスを作成しようとしています。（リングの例は収縮しています。私は別の方向に進みたいと思っています）。

これまでのところ、かなり良いスタートを切っていますが、ループを「スムーズに」ループさせる方法、または CSS だけで可能かどうかはわかりません。

ヒントやアイデアは大歓迎です。ありがとう！

デモ: http://codepen.io/fractionwhole/pen/HljuG

4

2 に答える 2

4

まず、6つのリングを作成しましょう

<div id="r1" class="ring"></div>
<div id="r2" class="ring"></div>
<div id="r3" class="ring"></div>
<div id="r4" class="ring"></div>
<div id="r5" class="ring"></div>
<div id="r6" class="ring"></div>

そしてCSS：

.ring {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    background-color: transparent;
    border: 15px gray solid;
    -webkit-animation-name: ani; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 6s;
    -webkit-animation-direction: reverse;
}

@-webkit-keyframes ani {
    0% {-webkit-transform: scale(1); opacity: 0;}
    10% {-webkit-transform: scale(1); opacity: 1;}
    99.9% {-webkit-transform: scale(0.1); opacity: 1} 
    100% {-webkit-transform: scale(0.1); opacity: 0} 
}

#r2 { -webkit-animation-delay: 1s;}
#r3 { -webkit-animation-delay: 2s;}
#r4 { -webkit-animation-delay: 3s;}
#r5 { -webkit-animation-delay: 4s;}
#r6 { -webkit-animation-delay: 5s;}

アイデアは、リングを最小スケールで表示し、最小スケールから最大スケールに移動してから消えるようにすることです。

n 個のリングを作成するには、別のアニメーションを作成する必要はありません。最初の遅延で同じものを再利用するだけです。

私はあなたの質問を読み違え、あなたがビデオの反対を望んでいることを知りませんでした. 後でアニメーションを逆に設定して修正しました。ごめん ！

Webkit デモ

より良い解決策:

CSS

.ring {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    background-color: transparent;
    border: 15px gray solid;
    -webkit-animation-name: ani; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 6s;
    -webkit-animation-direction: normal;

}

@-webkit-keyframes ani {
    0% {-webkit-transform: scale(0.01); opacity: 0} 
    1% {-webkit-transform: scale(0.01); opacity: 1} 
    95% {-webkit-transform: scale(1); opacity: 1;}
    100% {-webkit-transform: scale(1); opacity: 0;}
}

#r2 { -webkit-animation-delay: -1s;}
#r3 { -webkit-animation-delay: -2s;}
#r4 { -webkit-animation-delay: -3s;}
#r5 { -webkit-animation-delay: -4s;}
#r6 { -webkit-animation-delay: -5s;}

新しいデモ

キーフレームを変更して、通常どおり実行できるようにしました。さらに重要なことは、遅延を負に設定すると、リングを別々に保つことができますが、アニメーションはすぐに開始されます.

于 2013-07-20T21:36:53.883 に答える
0

スケーリングに加えて、小さなリングを動的に追加し、一定期間後に css アニメーションをそれらに添付する必要があります。それに応じて、大きなリングを削除する必要があります。そのためにはjqueryを使用する必要があります。小さいリングは適切に識別されている必要があります。

t=0 で、r1-r7(外側) の 7 つのリングがあるとします。7 番目のリングが見えなくなったら、内側に別のリング (ID が r7) を追加し、アニメーションを追加します。これを無限に繰り返します。

于 2013-07-20T20:42:38.280 に答える