在CSS3中，可以使用@keyframes規則和animation屬性來實現動畫效果。以下是一個簡單的示例：
@keyframes規則，定義動畫的關鍵幀。關鍵幀是動畫中的重要時刻，它們定義了動畫的起始、中間和結束狀態。在這個例子中，我們將創建一個簡單的淡入淡出效果：@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
這里，我們定義了三個關鍵幀：0%（動畫開始時），50%（動畫進行到一半時）和100%（動畫結束時）。在這些關鍵幀中，我們設置了元素的opacity屬性。
animation屬性將動畫應用到一個元素上。animation屬性是一個簡寫屬性，它允許你設置多個動畫相關的值。在這個例子中，我們將應用我們剛剛創建的fadeInOut動畫：.element {
animation-name: fadeInOut;
animation-duration: 2s;
animation-iteration-count: infinite;
}
這里，我們設置了以下屬性：
animation-name: 指定要應用的動畫名稱，即我們剛剛創建的fadeInOut。animation-duration: 指定動畫的持續時間，這里設置為2秒。animation-iteration-count: 指定動畫的迭代次數。infinite表示動畫將無限次重復。現在，所有具有.element類的HTML元素都將應用這個淡入淡出動畫效果。你可以根據需要調整關鍵幀和動畫屬性，以創建更復雜的動畫效果。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
