CSS3動畫中透明度的變化是非常常見的效果,在實現這個效果時我們可以通過設置opacity屬性來控制元素的透明度,同時加上動畫效果使得透明度能夠平滑過渡。
.box { opacity:0; animation: fadeIn 2s ease-in-out; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
上面的代碼表示元素開始時透明度為0,同時采用fadeIn動畫效果讓其在2秒內逐漸變為不透明。關鍵在于我們在@keyframes中定義了透明度在0%時為0,在100%時為1,這樣就能夠實現透明度的平滑過渡。
同時,我們也可以對不同的元素設置不同的透明度變化效果,例如:
.box1 { opacity:0; animation: fadeIn1 2s ease-in-out; } .box2 { opacity:0; animation: fadeIn2 2s ease-in-out; } @keyframes fadeIn1 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn2 { 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
box1和box2元素都使用了fadeIn動畫,但是透明度的變化效果不同。box1元素采用了和之前一樣的從完全透明到不透明的變化效果,而box2元素在進行了50%的變化后會有一個透明度為0.5的狀態,這樣可以在UI設計中增加更多的變化效果。
總的來說,在CSS3動畫中,透明度的變化實現起來十分方便,只需要通過opacity屬性和@keyframes動畫定義即可。同時也可以通過對不同元素設置不同的透明度變化效果來達到更加生動的UI效果。