CSS3擁有豐富的動畫效果,其中輪流動畫是最常用的之一。下面我們來介紹幾種常見的輪流動畫效果。
/* 平移動畫 */ @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } /* 縮放動畫 */ @keyframes scale { 0% { transform: scale(1); } 100% { transform: scale(2); } } /* 旋轉動畫 */ @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
以上三種動畫分別為平移、縮放和旋轉。接下來我們將它們應用到HTML元素上,并設置它們的延遲時間和次數。
/* 動態樣式 */ .box { width: 100px; height: 100px; background: red; animation-duration: 2s; animation-iteration-count: infinite; } /* 平移動畫應用 */ .move { animation-name: move; animation-delay: 0s; } /* 縮放動畫應用 */ .scale { animation-name: scale; animation-delay: 0.5s; } /* 旋轉動畫應用 */ .rotate { animation-name: rotate; animation-delay: 1s; }
最后,我們在HTML文件中設置三個元素,分別應用不同的動畫效果。
以上就是CSS3輪流動畫的應用方式,通過組合不同的動畫效果可以創造出更加炫酷的效果。