0

クラス「バウンス」を使用して、すべての div にカスタム アニメーション遅延を追加するにはどうすればよいですか? 基本的に、クラス バウンスにはアニメーション CSS キーフレーム (animate.css) が含まれます。現在、「360player バウンス」と呼ばれる 20 個の div があります。しかし、それらはすべて同時に跳ね返ります。

例：

<div class="360player bounce">
    <a href="audio/The_Song.mp3">
        The Song
    </a>
</div>

どうすればこれができるのだろうと思っています。stackoverflow と google 全体を検索しましたが、これまでのところ運がありません。

4

2 に答える 2

1

流れ星の同様のアニメーションを作成しました。それぞれ異なる遅延を持つ個別のアニメーション セットを作成する必要があると思います。私のインスタンスで何を達成しようとしているかによって異なりますが、5 つ、6 つの異なるアニメーション チェーンを作成し、それぞれを少し遅らせて、すべて異なる時間に動いているように見えます。以下の例

@keyframes fallingstars {
    0% {
    opacity: 1;
    transform: translate(0, 0px) rotateZ(0deg);
    }
    25% {
    opacity: 1;
    transform: translate(0px, 0px) rotateZ(deg);
    }
    100% {
    opacity: 0;
    transform: translate(-870px, 500px) rotateZ(310deg);
    }

}

@keyframes fallingstars2 {
    0% {
    opacity: 1;
    transform: translate(0, 0px) rotateZ(25deg);
    }
    25% {
    opacity: 1;
    transform: translate(0px, 0px) rotateZ(deg);
    }
    100% {
    opacity: 0;
    transform: translate(-570px, 600px) rotateZ(210deg);
    }

}



#fallstar {
    animation: fallingstars 12s infinite;
    animation-delay:5s;
    z-index:-1;
}

#fallstar2 {
    animation: fallingstars2 12s infinite;
    z-index:-1;
}


    <img src="stars-ALL.svg" id="fallstar" alt="Stars"  style="width:50px; height:50px; top:0px; right:-50px; position:absolute;" />

jquery / js を使用してアニメーションを変更し、遅延を変更することもできます。これは、これを実現するいくつかの方法の 1 つにすぎません。すべての div をループし、各 div についてアニメーションの遅延を変更します。これは割高になりそうな予感。

于 2013-06-12T15:42:50.150 に答える