寫動畫可以使用CSS3的動畫模塊,該模塊提供了許多強大的動畫效果,包括旋轉、縮放、移動等,在CSS3中,可以使用@keyframes規(guī)則來定義動畫,該規(guī)則允許您創(chuàng)建從一種樣式逐漸變?yōu)榱硪环N樣式的動畫。
以下是一個簡單的CSS3動畫示例,該動畫將一個元素從透明漸變到完全不透明:
@keyframes opacity-change { from { opacity: 0; } to { opacity: 1; } } div { animation-name: opacity-change; animation-duration: 2s; }
在上面的示例中,@keyframes規(guī)則定義了一個名為“opacity-change”的動畫,該動畫將元素的透明度從0漸變到1,將“animation-name”屬性設置為“opacity-change”,并將“animation-duration”屬性設置為2s,以指定動畫的持續(xù)時間為2秒。
除了@keyframes規(guī)則外,CSS3的動畫模塊還提供了許多其他屬性,transform”和“transition”,這些屬性可以用于創(chuàng)建更復雜的動畫效果,CSS3的動畫模塊還支持多種動畫同時運行、動畫延遲、動畫循環(huán)等功能,使得在網頁上創(chuàng)建豐富的動畫效果變得更加容易。