CSS3動畫是一種在移動端中廣泛使用的技術。它可以使用CSS屬性來創建過渡、變形和動畫效果。與傳統的JavaScript相比,CSS3動畫具有更好的性能和更小的代碼量。
在使用CSS3動畫時,我們通常會使用關鍵幀動畫。它可以通過定義不同的關鍵幀來創建動畫效果。例如,我們可以在50%的關鍵幀處將一個元素旋轉90度:
.box { animation: rotate 2s; } @keyframes rotate { 50% { transform: rotate(90deg); } }
在上面的代碼中,我們首先定義了一個.box類,然后將rotate動畫應用于它。通過@keyframes關鍵字定義了一個名為rotate的動畫,它在50%的關鍵幀處旋轉90度。
CSS3動畫還支持過渡效果。與關鍵幀動畫不同,過渡效果可以自動完成從初始狀態到最終狀態的過程。例如,我們可以使用以下代碼將一個元素從半透明變為不透明:
.box { opacity: 0.5; transition: opacity 2s; } .box:hover { opacity: 1; }
在上面的代碼中,我們定義了一個.box類,并將其初始不透明度設置為0.5。我們還將opacity屬性應用于過渡效果,并設置過渡時間為2秒。當鼠標懸停在元素上時,我們將不透明度設置為1,這將啟動過渡效果。
總的來說,CSS3動畫是在移動端中實現動態效果的一種非常方便的方法。它具有更好的性能和更小的代碼量,可以幫助我們更快速地實現各種動畫效果。