CSS3 提供了許多強大的動畫功能，可以通過使用關鍵幀（Keyframes）和動畫屬性（Animation properties）來實現各種動畫效果。以下是一些基本步驟和示例，幫助你了解如何使用 CSS3 創建動畫。
關鍵幀定義了動畫開始、中間和結束的狀態。你可以使用 @keyframes 規則來創建關鍵幀。
/* 定義一個名為 'my-animation' 的動畫 */
@keyframes my-animation {
0% {
transform: translateY(0); /* 動畫開始時，元素垂直居中 */
}
50% {
transform: translateY(-20px); /* 動畫中間，元素向下移動 20px */
}
100% {
transform: translateY(0); /* 動畫結束時，元素回到初始位置 */
}
}
一旦定義了關鍵幀，就可以將動畫應用到 HTML 元素上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Animation Example</title>
<style>
/* 定義關鍵幀 */
@keyframes my-animation {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
/* 應用動畫到元素 */
.box {
width: 100px;
height: 100px;
background-color: blue;
animation-name: my-animation; /* 引用定義的關鍵幀 */
animation-duration: 4s; /* 動畫持續時間 */
animation-iteration-count: infinite; /* 動畫無限次重復 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
除了 animation-name、animation-duration 和 animation-iteration-count，還可以使用以下屬性來進一步控制動畫：
animation-delay: 動畫開始前的延遲時間。animation-timing-function: 控制動畫速度曲線（例如 ease、linear、ease-in、ease-out）。animation-fill-mode: 控制動畫結束后元素的狀態（例如 forwards、backwards、both）。animation-direction: 控制動畫是否反向播放（normal、reverse、alternate、alternate-reverse）。/* 應用更多動畫屬性 */
.box {
width: 100px;
height: 100px;
background-color: blue;
animation-name: my-animation;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-delay: 2s; /* 動畫開始前延遲 2 秒 */
animation-timing-function: ease-in-out; /* 動畫速度曲線 */
animation-fill-mode: forwards; /* 動畫結束后保持最后一幀狀態 */
animation-direction: alternate; /* 動畫反向播放 */
}
通過這些步驟和示例，你可以創建各種復雜的 CSS3 動畫效果。不斷實踐和探索更多的 CSS3 動畫屬性，你將能夠實現更加豐富和動態的網頁設計。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
