複数画像間のクロスフェードCSS

cssを使用して3枚の画像の間でクロスフェードを実行しようとしています。複数画像間のクロスフェードCSS

私は@keyframesに新しいですので、動作させるには問題があります。以下は

は、HTMLとCSSのコードスニペットです：

のindex.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 

    <body> 
     <div id="cf"> 
      <img class="bottom" src="assets/1.png" /> 
      <img class="top" src="assets/2.png" /> 
       <img class="bottom" src="assets/3.png"> 
     </div> 
    </body> 
</html>

のstyle.css：今

#cf { 
    position: relative; 
    height: auto; 
    width: auto; 
    margin: 0 auto; 
} 

#cf img { 
    position: absolute; 
    left: 0; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

#cf img { 
    animation-name: cf3FadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 6s; 
    animation-direction: alternate; 
} 

#cf img:nth-of-type(1) { 
    animation-delay: 4s; 
} 

#cf img:nth-of-type(2) { 
    animation-delay: 2s; 
} 

#cf img:nth-of-type(3) { 
    animation-delay: 0; 
} 

@keyframes cf3FadeInOut { 
    0% { 
     opacity: 1; 
    } 
    17% { 
     opacity: 1; 
    } 
    25% { 
     opacity: 0; 
    } 
    92% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
}

は、アニメーションは、奇妙な演技から点滅しています1つの画像を別の画像に、ランダムなアニメーション時に表示する。

出典

2017-04-05 GreetingsFriend

正しい解決策に近づいています。 animation-direction: alternate;は、アニメーションを100％に達したら「後方に」実行させます。奇数回はあなたのキーフレームで定義されていると、これが不均一な遷移につながる：

keyframe  0% 17% 25% 92% 100% 92% 25% 17% 0% 17% ... infinite 
state   :1 1 0 0  1  0 0 1 1 1 
time in state : 17%  62% 0%  62%   34% 
transition time:  8%  8%  8%  8%

は偶数回のキーフレームを簡素化し、あなたは問題ないはずです。偶数時間分布では、animation-directionはまったく必要ありません。キーフレームのanimation-durationと画像のanimation-delayを変更すると、時間を簡単に調整できます。厳密話さ

#cf img { 
 
    animation-name: cf3FadeInOut; 
 
    animation-timing-function: ease-in-out; 
 
/* if you only want to cycle a finite amount of times, 
 
    simply change 'infinite' with # of iterations you need */ 
 
    animation-iteration-count: infinite; 
 
    animation-duration: 6s; 
 
    animation-direction: alternate; /* not strictly necessary */ 
 
    position:absolute; 
 
} 
 

 
#cf img:nth-of-type(1) { 
 
    animation-delay: 5s; 
 
} 
 

 
#cf img:nth-of-type(2) { 
 
    animation-delay: 3s; 
 
} 
 

 
#cf img:nth-of-type(3) { 
 
    /* add some delay for the first picture as well */ 
 
    animation-delay: 1s; 
 
} 
 

 
@keyframes cf3FadeInOut { 
 
    /* distributing times evenly */ 
 
    0% { 
 
     opacity: 1; 
 
    } 
 
    25% { 
 
     opacity: 0; 
 
    } 
 
    75% { 
 
     opacity: 0; 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
    } 
 
}

<div id="cf"> 
 
    <img class="bottom" src="http://lorempixel.com/200/100/sports/1" /> 
 
    <img class="top" src="http://lorempixel.com/200/100/sports/2" /> 
 
    <img class="bottom" src="http://lorempixel.com/200/100/sports/3"> 
 
</div>

、最初の2つの遷移は、それらが代わりにフェージング画像のopacity:1の画像に遷移するので、わずかに異なっていて、わずかに異なる時間を有し、その差はかろうじて可視およびIMOであります結果として得られるコードの複雑さと比較して、その価値はありません。

出典

2017-04-05 19:06:05 Christoph

それがうまくいった！ imgトランジション間の時間をどのように増やすのですか？彼らはちょっと速く切り替わります。 – GreetingsFriend

時間を単に変更する - 私はそれに応じてそれを答えに加えました。 – Christoph

バックグラウンドの背景画像が表示されることがあります。私はそれを止めることができますか？ – GreetingsFriend

複数画像間のクロスフェードCSS

答えて

関連する問題