CSS3 動(dòng)畫教學(xué)

CSS3 動(dòng)畫是用于創(chuàng)建在網(wǎng)頁中呈現(xiàn)動(dòng)態(tài)效果的技術(shù)。CSS3 動(dòng)畫可以用于創(chuàng)建各種動(dòng)畫，如停車、阻止運(yùn)動(dòng)、向右滑動(dòng)、旋轉(zhuǎn)等等。此外，CSS3 動(dòng)畫也可以用于在網(wǎng)站上創(chuàng)建交互式動(dòng)畫，使用戶與網(wǎng)站進(jìn)行更深入的互動(dòng)。

/* 在 CSS3 中創(chuàng)建動(dòng)畫有兩種方法 */
.animation{
/* 方法 1：使用 @keyframes 規(guī)則 */
animation-name: myAnimation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
/* 方法 2: 使用 CSS 轉(zhuǎn)換和過渡 */
/* 啟用過渡 */
transition: all 1s ease;
}

方法 1 使用"@keyframes" 規(guī)則來創(chuàng)建動(dòng)畫。"@keyframes" 規(guī)則指定要?jiǎng)?chuàng)建的動(dòng)畫名稱及其相關(guān)的關(guān)鍵幀的百分比。例如：

@keyframes myAnimation{
/* 動(dòng)畫名稱：myAnimation */ 
0%{ transform: translateX(0px);}
50%{ transform: translateX(400px);}
100%{ transform: translateX(0px);}
}

方法 2 使用 CSS 轉(zhuǎn)換和過渡來創(chuàng)建動(dòng)畫。通過為 HTML 元素定義 CSS 轉(zhuǎn)換和過渡屬性，可以向 HTML 元素應(yīng)用動(dòng)畫效果。例如：

.animation{
/* 定義其默認(rèn)狀態(tài)*/
transform: translate (Opx);
/*鼠標(biāo)移到元素上時(shí)，應(yīng)用此樣式*/
&:hover{
transform: translate(200px);
}
/* 添加過渡 */
transition: all 1s ease;
}

最后，CSS3 動(dòng)畫可以顯著提高網(wǎng)站的外觀和互動(dòng)性。通過合理地使用 CSS3 動(dòng)畫，您可以創(chuàng)建更有吸引力和個(gè)性化的網(wǎng)站，并提供更好的用戶體驗(yàn)和互動(dòng)性。