在現代網頁設計中，使用圖片作為網站的設計元素已經變得非常流行。CSS提供了各種方式來對圖片進行樣式修飾和動畫效果的添加。本文將介紹如何通過CSS來為圖片添加過渡動畫效果。

img{
transition-duration: 0.3s;
}
img:hover{
transform: scale(1.1);
}

上述代碼的意思是，當鼠標懸停在圖片上時，圖片會以1.1倍的比例放大，并且會有0.3秒的過渡動畫。這種動畫效果的應用可以讓網站更有活力和吸引力。

img{
transition-duration: 0.3s;
}
img:hover{
opacity: 0.5;
}

另一種添加過渡動畫效果的方式是改變圖片的不透明度。上述代碼的意思是，當鼠標懸停在圖片上時，圖片的不透明度會從1變為0.5，并且有0.3秒的過渡動畫。同樣地，這種效果也可以為網站帶來更多的生氣和動感。

CSS的過渡動畫效果不僅可以應用在圖片上，還可以用在其它元素上，比如文字和背景顏色等。通過巧妙地使用過渡動畫，設計人員可以為網站帶來更多的創意和視覺沖擊力。