純CSS交叉淡入淡出畫廊與任何數量的圖片

Question

我有一個幻燈片，其中圖片在循環中自動交叉淡入淡出。它被設置爲3張圖片滾動。

演示在Codepen（http://codepen.io/lopis/pen/VYRoKE）

<section class="crossfade"> 
    <article class="slide"> 
    <img src="http://lorempixel.com/400/200/people" alt="" /> 
    </article> 
    <article class="slide"> 
    <img src="http://lorempixel.com/400/200/cats" alt="" /> 
    </article> 
    <article class="slide"> 
    <img src="http://lorempixel.com/400/200/sports" alt="" /> 
    </article> 
</section> 

的CSS：

$slideDuration: 4; // seconds 
$slideNum: 3; 

@mixin loop($name, $duration, $delay) { 
    -webkit-animation: $name #{$duration}s #{$delay}s infinite; 
    -moz-animation: $name #{$duration}s #{$delay}s infinite; 
    animation: $name #{$duration}s #{$delay}s infinite; 
} 

@mixin slide() { 
    @for $i from 1 through $slideNum { 
    .slide:nth-child(#{$i}) { 
     @include loop(crossfade, ($slideNum * $slideDuration), (($i - 1) * $slideDuration)); 
    } 
    } 
} 

@mixin keyframes() { 

    @-webkit-keyframes crossfade { 
    0% { 
     opacity:1; 
    } 
    25% { 
     opacity:1; 
    } 
    33% { 
     opacity:0; 
    } 
    86% { 
     opacity:0; 
    } 
    100% { 
     opacity:1; 
    } 
    } 

    @keyframes crossfade { 
    0% { 
     opacity:1; 
    } 
    25% { 
     opacity:1; 
    } 
    33% { 
     opacity:0; 
    } 
    86% { 
     opacity:0; 
    } 
    100% { 
     opacity:1; 
    } 
    } 
} 


.crossfade { 
    position: relative; 
} 
.slide { 
    position: absolute; 
    top: 0; 
} 
.slide:first-child { 
    position: static; 
} 

@include slide(); 

@include keyframes(); 

有沒有一種方法，使像這樣的會，只要使用CSS任意數量的幻燈片的工作動畫？

編輯：據我所知，這樣的動力並不打算在CSS，但你可以通過使用calc()有一些動態內容，如，等

一些圖書館，作爲一個在評論中建議，允許爲此任務使用mixins。這不是我正在尋找的，因爲它需要重建源代碼。

Answer 1

你可以得到這個只用CSS，使用內容響應技術

讓我們設定的時間爲2秒每張幻燈片。

我們需要爲每2秒的第n個孩子設置一個交錯延遲。這很容易與孩子進行交流。

現在，我們需要增加轉換的持續時間，具體取決於元素的數量。使用這個technique我們很容易實現。

第三個問題是管理淡出。在標準方法中，這將涉及更改關鍵幀更改點，並且這會很麻煩。讓代碼少得多的技巧就是在動畫中創建z-index運動。這些元素向後移動，而我們不關心他們的不透明瞭

例僅WebKit和3號更多鈔票元素的設置：

.container { 
 
    width: 100px; 
 
    height: 50px; 
 
    position: relative; 
 
    margin: 10px; 
 
    display: inline-block; 
 
} 
 

 
.element { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    -webkit-animation: anim 6s infinite; 
 
} 
 

 

 
.element:nth-child(1) { 
 
    background-color: lightyellow; 
 
    -webkit-animation-delay: 0s; 
 
} 
 

 
.element:nth-child(2) { 
 
    background-color: lightgreen; 
 
    -webkit-animation-delay: 2s; 
 
} 
 
.element:nth-child(3) { 
 
    background-color: pink; 
 
    -webkit-animation-delay: 4s; 
 
} 
 
.element:nth-child(4) { 
 
    background-color: lightblue; 
 
    -webkit-animation-delay: 6s; 
 
} 
 
.element:nth-child(5) { 
 
    background-color: coral; 
 
    -webkit-animation-delay: 8s; 
 
} 
 
.element:nth-child(6) { 
 
    background-color: aliceblue; 
 
    -webkit-animation-delay: 10s; 
 
} 
 
.element:nth-child(7) { 
 
    background-color: burlywood; 
 
    -webkit-animation-delay: 12s; 
 
} 
 
.element:nth-child(8) { 
 
    background-color: bisque; 
 
    -webkit-animation-delay: 14s; 
 
} 
 
.element:nth-child(9) { 
 
    background-color: beige; 
 
    -webkit-animation-delay: 16s; 
 
} 
 

 
.element:nth-last-child(3):first-child, 
 
.element:nth-last-child(3):first-child ~ .element { 
 
    -webkit-animation-duration: 6s; 
 
} 
 

 
.element:nth-last-child(6):first-child, 
 
.element:nth-last-child(6):first-child ~ .element { 
 
    -webkit-animation-duration: 12s; 
 
} 
 

 
.element:nth-last-child(9):first-child, 
 
.element:nth-last-child(9):first-child ~ .element { 
 
    -webkit-animation-duration: 18s; 
 
} 
 

 
@-webkit-keyframes anim { 
 
    0% { opacity: 0; z-index: 100;} 
 
    10% { opacity: 1;} 
 
    50% { opacity: 1;} 
 
    100% { opacity: 0; z-index: 1;} 
 
}

<div class="container"> 
 
    <div class="element">ONE</div> 
 
    <div class="element">TWO</div> 
 
    <div class="element">THREE</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="element">ONE</div> 
 
    <div class="element">TWO</div> 
 
    <div class="element">THREE</div> 
 
    <div class="element">FOUR</div> 
 
    <div class="element">FIVE</div> 
 
    <div class="element">SIX</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="element">ONE</div> 
 
    <div class="element">TWO</div> 
 
    <div class="element">THREE</div> 
 
    <div class="element">FOUR</div> 
 
    <div class="element">FIVE</div> 
 
    <div class="element">SIX</div> 
 
    <div class="element">SEVEN</div> 
 
    <div class="element">EIGHT</div> 
 
    <div class="element">NINE</div> 
 
</div>