以固定時間間隔更改內容的動畫延遲屬性

我正在嘗試動畫兩張圖片，以便它們以固定的時間間隔更改，但問題在於第二個圖像很快就會出現並消失我需要一種方法來使延遲屬性重複已審閱本，但似乎並沒有工作CSS animation delay in repeating
http://jsfiddle.net/fc3nb5rL/2/以固定時間間隔更改內容的動畫延遲屬性

我想我的問題是在這裏某處

@-webkit-keyframes anim { 
from { 
    z-index:1; 
} 
to { 
    z-index:-2; 
} 
} 
.back { 
-webkit-animation:anim 5s; 
-webkit-animation-iteration-count:infinite; 
-webkit-animation-timing-function: ease-in-out; 
} 

@-webkit-keyframes anim2 { 
from { 
    z-index:1; 
} 
to { 
    z-index:-2; 
} 
}

來源

2014-09-25 Akshay

首先解決您的HTML (markup)，那麼你可以動畫opacity而不是z-index

.container { 
 
    position:relative; 
 
    height:500px; 
 
    width:500px; 
 
    margin:0 auto; 
 
} 
 
.container img { 
 
    position:absolute; 
 
    width:100%; 
 
} 
 

 
@-webkit-keyframes anim1 { 
 
    from { 
 
     opacity:0; 
 
    } 
 
    to { 
 
     opacity:1; 
 
    } 
 
} 
 

 

 
@-webkit-keyframes anim2 { 
 
    from { 
 
     opacity:1; 
 
    } 
 
    to { 
 
     opacity:0; 
 
    } 
 
} 
 

 
[href=first] img { 
 
    opacity:0; 
 
    /*animation----:----name--duration--delay--timing function---direction----iteration count*/ 
 
    -webkit-animation: anim1 2s 0s linear alternate infinite; 
 
} 
 
[href=second] img { 
 
    opacity:1; 
 
    -webkit-animation: anim2 2s 0s linear alternate infinite; 
 
}

<div class="container"> 
 
    <a href="second"> 
 
     <img src="http://placekitten.com/300/300" /> 
 
    </a> 
 
    <a href="first"> 
 
     <img class="front" src="http://placekitten.com/300/301" /> 
 
    </a> 
 
</div>

來源

2014-09-25 12:55:17

這是偉大的，但在我的代碼的圖片有不同的聯繫，但這裏只有一個 – Akshay 2014-09-25 12:56:44

什麼是你一個鏈接？你的意思是源'src'？ – 2014-09-25 12:59:14

圖像是指向特定頁面的鏈接，每個圖像都有自己的鏈接，但如果使用不透明度，則只有一個鏈接（對於放置在頂部的圖像），另一個鏈接將具有相同的鏈接 – Akshay 2014-09-25 13:02:08

Give this a shot. I have also set it up to be cross-browser compatible. http://jsfiddle.net/fc3nb5rL/2/ 

A few things to note about CSS3 transitions. It does not know how to interpolate between the z-index  
property, as well as the display property.

來源

2014-09-25 13:38:25

抱歉把所有的代碼窗口，stackoverflow告訴我我的小提琴鏈接需要縮進，所以我這樣做，但不會讓我發佈，除非我縮進everythin – 2014-09-25 13:39:53

感謝您幫助我，我有我的答案，使用百分比似乎在做這項工作 – Akshay 2014-09-25 13:44:14

以固定時間間隔更改內容的動畫延遲屬性

回答

相關問題