最後のnth-childでCSSアニメーションを停止する方法css3

最後のnth-childで停止するようにクロスフェードアニメーションを取得するのに少し問題があります。私はアニメーション塗りつぶしモードを認識しています：転送は、動作しないようです（私は初期のクロスフェード宣言のように別の場所に置いてみました）最後のnth-childでCSSアニメーションを停止する方法css3

私のhtmlです：

<body> 
    <div class= "ad"> 
    <div class="crossfade"> 
     <img src="image1.jpg" alt="Image 1"> 
     <img src="image2.png" alt="Image 2"> 
     <img src="image3.png" alt="Image 3"> 
     <img src="image4.png" alt="Image 4"> 
    </div> 
    </div> 
</body>

そして、私のCSSはここにある：

.crossfade > img { 
    width: 300px; 
    height: 250px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    color: transparent; 
    opacity: 0; 
    z-index: 0; 
    animation-iteration-count:1; 
    -webkit-backface-visibility: hidden; 
    -webkit-animation-name: imageAnimation; 
    -webkit-animation: imageAnimation 43s linear 1 0s; 
    -moz-animation: imageAnimation 43s linear 1 0s; 
    -o-animation: imageAnimation 43 linear 1 0s; 
    -ms-animation: imageAnimation 43 linear 1 0s; 

} 

.crossfade > img:nth-child(1) { 
    -webkit-animation-delay: 1s; 
    -moz-animation-delay: 1s; 
    -o-animation-delay: 1s; 
    -ms-animation-delay: 1s; 
    animation-delay: 1s; 
} 

.crossfade > img:nth-child(2) { 
    -webkit-animation-delay: 7s; 
    -moz-animation-delay: 7s; 
    -o-animation-delay: 7s; 
    -ms-animation-delay: 7s; 
    animation-delay: 7s; 
} 
.crossfade > img:nth-child(3) { 
    -webkit-animation-delay: 14s; 
    -moz-animation-delay: 14s; 
    -o-animation-delay: 14s; 
    -ms-animation-delay: 14s; 
    animation-delay: 14s; 
} 

.crossfade > img:nth-child(4) { 
    -webkit-animation-delay: 21s; 
    -moz-animation-delay: 21s; 
    -o-animation-delay: 21s; 
    -ms-animation-delay: 21s; 
    animation-delay: 21s; 
    animation-fill-mode: forwards; 
} 

@-webkit-keyframes imageAnimation { 
    0%{ opacity:0; 
     -webkit-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -webkit-animation-timing-function: ease-out; } 
    17% { opacity: 1} 
    25% { opacity: 0 } 
    100% { opacity: 0} 
} 

@-moz-keyframes imageAnimation { 
    0% { opacity: 0; 
    -moz-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -moz-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0} 
    100% { opacity: 0 } 
} 

@-o-keyframes imageAnimation { 
    0% { opacity: 0; 
    -o-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -o-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 

@-ms-keyframes imageAnimation { 
    0% { opacity: 0; 
    -ms-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -ms-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0} 
    100% { opacity: 0 } 
}

私は私が間違ってやっているか、私が欠けているものをかなりよく分かりません。前もって感謝します！

出典

2017-08-26 Jessica Foo

exampleとしてこれを参照してください、あなたも、特定の遅延の後each childに何度も何度も宣言animationを呼び出して、このようにそれを試みることができます。 animation-fill-mode:forwardsは、最後に100%で終了するアニメーションのpropertyを取り込みます。つまり、アニメーション終了時にopacityの値が適用されます。以下の例では、それぞれの画像のカラートランジションを行うために、imageにはそれぞれanimation-fill-mode:forwardsを使用しています。

div img { 
 
    width: 250px; 
 
    height: 250px; 
 
    position: absolute; 
 
} 
 

 
div img:nth-child(1) { 
 
    opacity: 0; 
 
    animation: mv 10s linear forwards; 
 
} 
 

 
div img:nth-child(2) { 
 
    opacity: 0; 
 
    animation: mv 10s linear 10s forwards; 
 
} 
 

 
div img:nth-child(3) { 
 
    opacity: 0; 
 
    animation: mv 10s linear 20s forwards; 
 
} 
 

 
div img:nth-child(4) { 
 
    opacity: 0; 
 
    animation: mv 10s linear 30s forwards; 
 
} 
 

 
@keyframes mv { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<div> 
 
    <img src="http://placehold.it/301/f22" alt="Image 1"> 
 
    <img src="http://placehold.it/302/f2f" alt="Image 2"> 
 
    <img src="http://placehold.it/303/ff2" alt="Image 3"> 
 
    <img src="http://placehold.it/304/2f2" alt="Image 4"> 
 
</div>

出典

2017-08-26 15:55:33 frnt

本当にありがとうございました！あなたは本当に簡単にそれに答えた、それは理にかなった。（私はまだ少しcss3に新しいです）。私は、新しい「アニメーション」を宣言することを正しく理解していますか？毎回、個々の子供のアニメーションを「再起動」するようになるでしょうか？サイドの質問：私は現在チュートリアルに従っており、答えに-o-、-moz-、-webkit-を使用する必要がないことに気付きました。私の理解は、それらが異なるブラウザと互換性を持たせるために使用されていますが、あなたのバージョンは関係なく動作するようです。いつ私がそれらを使用するための特別なケースはありますか？：]再び感謝のヒープ。 –

@JessicaFooこの回答の解決策は、アニメーションを_restart_していない、それは私がすでに私の答え（2番目のサンプルをチェックしてください、これはまったく同じですが、より最適化されたものをチェックします）よりもパフォーマンスが低い4アニメーションを作成します。私はこのようにすることをお勧めしません。 – LGSon

@JessicaFooまた、接頭辞付きのプロパティの欠如は、それが理解されるように、古いブラウザでは必要とされていても機能しません。また、古いブラウザを持つWebサイトの訪問者にもアニメーションを参照してください。 – LGSon

あなた@keyframesルールはあなたがforwardsかを使用している場合、それは問題ではありませんopacity: 0で終わるので、その終了状態は、両方のためのopacity: 0になります。

1つの解決策は、forwardsと一緒に、最後の項目の2番目の@keyframesルールを追加することです。

メモ、私はすべての接頭辞付きプロパティを削除して、コードを解析しやすくしました。また、元のコードは、プロパティとキーフレームルールの両方を非接頭辞の多くを欠いていたし、非は

.crossfade > img { 
 
    width: 300px; 
 
    height: 250px; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    color: transparent; 
 
    opacity: 0; 
 
    z-index: 0; 
 
    backface-visibility: hidden; 
 
    animation: imageAnimation 43s linear 0s 1 forwards; 
 
} 
 

 
.crossfade > img:nth-child(1) { 
 
    animation-delay: 1s; 
 
} 
 

 
.crossfade > img:nth-child(2) { 
 
    animation-delay: 7s; 
 
} 
 
.crossfade > img:nth-child(3) { 
 
    animation-delay: 14s; 
 
} 
 

 
.crossfade > img:nth-child(4) { 
 
    animation-delay: 21s; 
 
    animation-name: imageAnimationLast; 
 
} 
 

 
@keyframes imageAnimation { 
 
    0%{ opacity:0; 
 
     animation-timing-function: ease-in; } 
 
    8% { opacity: 1; 
 
     animation-timing-function: ease-out; } 
 
    17% { opacity: 1} 
 
    25% { opacity: 0 } 
 
    100% { opacity: 0} 
 
} 
 

 
@keyframes imageAnimationLast { 
 
    0%{ opacity:0; 
 
     animation-timing-function: ease-in; } 
 
    8% { opacity: 1; 
 
    100% { opacity: 1} 
 
}

<div class= "ad"> 
 
    <div class="crossfade"> 
 
     <img src="http://placehold.it/200/f00" alt="Image 1"> 
 
     <img src="http://placehold.it/200/ff0" alt="Image 2"> 
 
     <img src="http://placehold.it/200/0ff" alt="Image 3"> 
 
     <img src="http://placehold.it/200/00f" alt="Image 4"> 
 
    </div> 
 
    </div>

ベースを接頭辞の前に、あなたはまた、常に先頭にプロパティを置く必要がありますあなたがそれらのアイテムでどうしようとしているのか、それらがどのように重なり合っているのか、そして2番目が3番目のものの上にあるようにすれば、

.crossfade > img { 
 
    width: 300px; 
 
    height: 250px; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    color: transparent; 
 
    opacity: 0; 
 
    z-index: 0; 
 
    backface-visibility: hidden; 
 
    animation: imageAnimation 43s ease-in 0s 1 forwards; 
 
} 
 

 
.crossfade > img:nth-child(1) { 
 
    animation-delay: 1s; 
 
} 
 

 
.crossfade > img:nth-child(2) { 
 
    animation-delay: 7s; 
 
} 
 
.crossfade > img:nth-child(3) { 
 
    animation-delay: 14s; 
 
} 
 

 
.crossfade > img:nth-child(4) { 
 
    animation-delay: 21s; 
 
} 
 

 
@keyframes imageAnimation { 
 
    0%{ opacity:0; } 
 
    8% { opacity: 1; } 
 
    100% { opacity: 1; } 
 
}

<div class= "ad"> 
 
    <div class="crossfade"> 
 
     <img src="http://placehold.it/200/f00" alt="Image 1"> 
 
     <img src="http://placehold.it/200/ff0" alt="Image 2"> 
 
     <img src="http://placehold.it/200/0ff" alt="Image 3"> 
 
     <img src="http://placehold.it/200/00f" alt="Image 4"> 
 
    </div> 
 
    </div>

出典

2017-08-26 13:40:13 LGSon

最後のnth-childでCSSアニメーションを停止する方法css3

答えて

関連する問題