Pure CSS images slider – fade and scale effects

用 CSS 的 animation 來寫圖片輪播非常簡單，只要弄懂 animation 和 @keyframes 的設定就行。

這裡用輪播 5 張圖的例子來解釋，如果播放 1 張圖要花 5 秒，總共要花 25 秒，所以 animation 的秒數 (duration) 要設定 25 秒，第 2 張要等第 1 張展示完才開始展示，所以要設定 animation-delay: 5s，第 3 張要等 10 秒，依此類推。

@keyframes 的設定：總共有 100%，輪播 5 張，每張會花費 20%(100/5) 的時間，0% – 20% 就是圖片進場的期間，20% – 40% 要讓圖片退場 (因為這時下一張圖片進場了)，進場要讓圖片有一段持續的時間展示，所以在 10% 時，就設定 opacity: 1，退場可以設定快一點，此範例中我是讓圖片在 30% 就設定 opacity: 0

動態效果用了 opacity 和 transform: scale (搭配父元素的 overflow: hidden 使用)，達到淡入淡出和漸漸放大的特效。

other tips:

• 使用 position: relative(父元素), absolute(子元素)，讓每張圖疊在一起。
• 若背景是白色，在兩張圖淡入淡出之際，會有畫面太亮的不適感，所以在 .slide 設定黑色背景。
• 使用 background-size: cover 可以讓圖片大小比例不受限制。

See the Pen Pure CSS images slider – fade and scale effects by Chia Yi Lai (@ChiaYiLai) on CodePen.