CSS3是一種美學和技術的完美結合。它允許網頁設計師使用更多的功能來創建視覺效果。

其中之一是圖片淡入淡出動畫。通過使用CSS3過渡屬性，我們可以直接使用零JavaScript代碼來創建漂亮的淡入淡出效果。

.fade-in-out {
width: 500px;
height: 400px;
position: relative;
overflow: hidden;
}
.fade-in-out img {
position: absolute;
z-index: -1;
opacity: 0;
}
.fade-in-out img:first-child {
z-index: 1;
opacity: 1;
}
.fade-in-out img {
-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;
}
.fade-in-out:hover img {
opacity: 0;
}
.fade-in-out:hover img:first-child {
opacity: 1;
}

上述代碼使用CSS3過渡屬性使第一張圖片的不透明度為1。而其他圖片的不透明度為0。當鼠標放在元素上時，不透明度會從1降為0，然后第二個圖片的不透明度會從0升至1。

這種效果可以用來為網站的滑動門或幻燈片制作一個清新、動態、吸引人的效果。

總的來說，圖片淡入淡出動畫的效果是一種在CSS3中非常流行的技術。在設計網站時使用它，將為您的用戶帶來更多的視覺享受和更美好的瀏覽體驗。