2

3つのサークルを持つCSS3サークルローダーがあります。問題が発生しています各円（最初から開始）は、おそらくCSSアニメーションを使用して数秒後にフェードアウトするはずです。どんな助けでも大歓迎です。

jsFiddle

4

3 に答える 3

3

少し違うルートに行きます。Webkit専用ですが、必要に応じて変更できます：http: //jsfiddle.net/8kQ2u/17/

@-webkit-keyframes fades {
    0%, 100% { 
       opacity: 1;
    }
    50% {
       opacity: 0;
    }
}

.circle span  {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 9.975em auto;
  background: #dbdbdb;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-name: fades;
  -webkit-animation-iteration-count: infinite;
}

.circle span:nth-child(2) {
    -webkit-animation-delay: 0.2s;
}

.circle span:nth-child(3) {
    -webkit-animation-delay: 0.4s;
}
​

:nth-childをサポートするブラウザで完全にサポートされていると確信しているので、ここで問題ありません@keyframes。必要に応じて、兄弟セレクターを使用できます（+）。

于 2012-12-21T15:22:58.033 に答える
1

キーフレームを使用すると、次のようになります：http: //jsfiddle.net/Nux3z/

詳細のカップル：

1) Use of :nth-child, or :first-child, etc to target your elements
2) Timing of animations: I'm using 1.7, 2.7, rather than 0.7s, 1.4s because I'm allowing for the 1s of fade to finish NOT simply doubling/tripling the time each element takes to animate.
3) Not a solution for IE
于 2012-12-21T15:32:56.070 に答える
0

他の人が言っているように、ここではアニメーションとタイミングを使用することが不可欠です。
実際、各円は同じアニメーションで使用されますが、各円に異なる遅延
を 適用する必要があります。

以下を参照してください（私もnth-child代わりに使用していますfirst-child）：

.circle span {
    /** The same animation to each circle **/
    -webkit-animation: circleFade 3s linear infinite;
}

/** Different animation delays **/
.circle span:nth-child(1) { -webkit-animation-delay: 1s; }
.circle span:nth-child(2) { -webkit-animation-delay: 2s; }
.circle span:nth-child(3) { -webkit-animation-delay: 3s; }

/** Animation **/
@-webkit-keyframes circleFade {
     0% { background: #ddd; }
    25% { background: #999; }
    35% { background: #999; }
    60% { background: #ddd; }
}​

[フィドルを見る]
[今度は派手なフィドルを見る]

于 2012-12-21T15:53:45.683 に答える