1

だから私は3つの画像をゆっくりと重ね合わせてフェードしようとしています. ここでこのチュートリアルに従っています。しかし、何らかの理由で、私の画像は互いにフェードアウトするのが速すぎて、タイミングをうまく制御できません。

これが私のプレビューページです。鳥、トマト、ボートが見られるはずですが、今はすべてが重なり合ってボートに乗ってしまいます。

Demo 1 と Demo 3 をフォローしていますが、アニメーションがオフになっている理由はありますか? 前もって感謝します！:)

私の jsfiddle: http://jsfiddle.net/leongaban/TPjWG/

コード：

<style>

@-webkit-keyframes cf4FadeInOut {
 0% {
   opacity:0;
 }
 25% {
   opacity:1;
 }  
 50% {
   opacity:1;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes cf4FadeInOut {
 0% {
   opacity:0;
 }
 25% {
   opacity:1;
 }  
 50% {
   opacity:1;
 }
 100% {
   opacity:1;
 }
}

@-ms-keyframes cf4FadeInOut {
 0% {
   opacity:0;
 }
 25% {
   opacity:1;
 }  
 50% {
   opacity:1;
 }
 100% {
   opacity:1;
 }
}       

#cf4a {
    position:relative;
    height:250px;
    width:300px;
    margin:0 auto;
}
#cf4a img {
    position:absolute;
    left:0;
}

#cf4a img {
    -webkit-animation-name: cf4FadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 30s;

    -moz-animation-name: cf4FadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: 1;
    -moz-animation-duration: 30s;

    -ms-animation-name: cf4FadeInOut;
    -ms-animation-timing-function: ease-in-out;
    -ms-animation-iteration-count: 1;
    -ms-animation-duration: 30s;                
}
#cf4a img:nth-of-type(1) {
    -webkit-animation-delay: 0;     
    -moz-animation-delay: 0;    
    -ms-animation-delay: 0; 
}
#cf4a img:nth-of-type(2) {
    -webkit-animation-delay: 30s;       
    -moz-animation-delay: 30s;  
    -ms-animation-delay: 30s;
}
#cf4a img:nth-of-type(3) {
    -webkit-animation-delay: 60s;       
    -moz-animation-delay: 60s;      
    -ms-animation-delay: 60s;       
}

</style>

<div id="cf4a">

    <a href="http://http://stackoverflow.com/" target="_blank"><img src="img/bird1.jpg" /></a>
    <a href="http://http://stackoverflow.com/" target="_blank"><img src="img/tomato2.jpg" /></a>
    <a href="http://http://stackoverflow.com/" target="_blank"><img src="img/boat3.jpg" /></a>

</div>

4

4 に答える 4

2

あなたの問題の一部はz-index、アニメーション中の順序付けと、アニメーションのタイミングの重複の欠如にあると思います（それに関連してz-index）。

フェードアウトのみの手法を使用する (画像の 1 回限りのアニメーションを行っているように見えるため)。私は Firefox と Chrome で動作するデモをテストしたソリューションを持っています(IE9 はアニメーションをサポートしていないため、拡張機能の最初の使用で IE10 に対応する必要があります-ms-)。フェード アウトは 1 回だけなので、finalaタグは最後に表示されて残るため、アニメーションは必要ありません (CSS3 以外のアニメーション ブラウザのデフォルトです)。

デモでは、次の CSS コード (オリジナルと同じ HTML) を使用します。

CSS

@-webkit-keyframes cf4FadeOut1 {
 0% {
   opacity:1;
   z-index: 100;
 }  
 80% { /* 6 sec trans on 30s animation */
   opacity:1;
   z-index: 100;
 }
 100% {
   opacity:0;
   z-index: 100;
 }
}

@-moz-keyframes cf4FadeOut1 {
 0% {
   opacity:1;
   z-index: 100;
 }  
 80% { /* 6 sec trans on 30s animation */
   opacity:1;
   z-index: 100;
 }
 100% {
   opacity:0;
   z-index: 100;
 }
}

@-ms-keyframes cf4FadeOut1 {
 0% {
   opacity:1;
   z-index: 100;
 }  
 80% { /* 6 sec trans on 30s animation */
   opacity:1;
   z-index: 100;
 }
 100% {
   opacity:0;
   z-index: 100;
 }
}

@-webkit-keyframes cf4FadeOut2 {
 0% {
   opacity:1;
   z-index: 2;
 }   
 90% { /* 6 sec trans on 60s animation */
   opacity:1;
   z-index: 2;
 }
 100% {
   opacity:0;
   z-index: 2;
 }
}

@-moz-keyframes cf4FadeOut2 {
 0% {
   opacity:1;
   z-index: 2;
 }   
 90% { /* 6 sec trans on 60s animation */
   opacity:1;
   z-index: 2;
 }
 100% {
   opacity:0;
   z-index: 2;
 }
}

@-ms-keyframes cf4FadeOut2 {
 0% {
   opacity:1;
   z-index: 2;
 }   
 90% { /* 6 sec trans on 60s animation */
   opacity:1;
   z-index: 2;
 }
 100% {
   opacity:0;
   z-index: 2;
 }
}

#cf4a {
    position:relative;
    height:250px;
    width:300px;
    margin:0 auto;
}
#cf4a a {
    position:absolute;
    left:0;
    z-index: 0;
}

#cf4a a {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0;

    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0;

    -ms-animation-timing-function: ease-in-out;
    -ms-animation-iteration-count: 1;
    -ms-animation-delay: 0;   
}

#cf4a a:nth-of-type(1) {
     -webkit-animation-name: cf4FadeOut1;
     -moz-animation-name: cf4FadeOut1;
     -ms-animation-name: cf4FadeOut1;

     -webkit-animation-duration: 30s;
     -moz-animation-duration: 30s;
     -ms-animation-duration: 30s;           
}

#cf4a a:nth-of-type(2) {
     -webkit-animation-name: cf4FadeOut2;
     -moz-animation-name: cf4FadeOut2;
     -ms-animation-name: cf4FadeOut2;

     -webkit-animation-duration: 60s;
     -moz-animation-duration: 60s;
     -ms-animation-duration: 60s;    
}
于 2012-04-16T15:38:51.573 に答える
1

あなたのフィドルとデモページには、<a>タグでラップされた画像があります。これにより、:nth-of-type() を使用するとエラーが発生します。

<a>タグ内のすべての「最初の子」要素であるため、すべての画像は :nth-of-type(1) 宣言の影響を受けています。

于 2012-04-11T06:57:00.680 に答える
0

jqueryを使ってみませんか。

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');
//var $sibs  = $active.siblings();
//var rndNum = Math.floor(Math.random() * $sibs.length );
//var $next  = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});
于 2012-04-16T09:24:47.477 に答える
0

いくつかの変更を加えて、以前よりもわずかにうまく機能するようになりました。しかし、画像が最後の画像から最初の画像に変わるときにアニメーションが正しく動作しない理由をまだ説明できません。

<head>
    <title> CSS alpha animation test </title>
    <meta charset="utf-8" />


</head>

<body>

    <style>

    @-webkit-keyframes cf4FadeInOut {
     0% {
       opacity:0;
     }
     45% {
       opacity:0;
     }    
     55% {
       opacity:1;
     }
     100% {
       opacity:1;
     }
    }       

    #cf4a {
        position:relative;
        height:250px;
        width:300px;
        margin:0 auto;
    }
    #cf4a img {
        position:absolute;
        left:0;
    }

    #cf4a img {
        -webkit-animation-name: cf4FadeInOut;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 30s;     
    }
    #cf4a img:nth-of-type(1) {
         -webkit-animation-delay: 0s;   
    }
    #cf4a img:nth-of-type(2) {
         -webkit-animation-delay: 10s;
    }
    #cf4a img:nth-of-type(3) {
         -webkit-animation-delay: 20s;       
    }

    </style>

    <div id="cf4a">

        <img src="http://leongaban.com/_stack/css_animation/img/bird1.jpg" />
        <img src="http://leongaban.com/_stack/css_animation/img/tomato2.jpg" />
        <img src="http://leongaban.com/_stack/css_animation/img/boat3.jpg" />

    </div>

</body>

</html>​​​​​​​​​​​​​​​

さまざまなブラウザー用の他のすべてのコードを削除し、webkit コードだけを残したことに注意してください。これは、これを chrome でテストしていたからです。また、例のように完了率を変更したところ、少し違いがありました。

于 2012-04-11T06:41:30.170 に答える