今天要介紹的是如何利用 CSS 創建簡單的動畫效果,並了解 @keyframes
的基本用法。@keyframes
是 CSS 中用來定義動畫的是 CSS 中用來定義動畫的核心工具,透過設定元素在不同行為階段的狀態,並以時間軸的方式創造流暢的過渡效果。
@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes
代碼使用了百分比來表示時間的進程:
.animated-box {
width: 200px;
height: 200px;
background-color: purple;
animation: fadeInOut 3s ease-in-out infinite;
margin: 50px auto;
}
在這段代碼中,我們為 .animated-box
定義了一個 200x200 像素的紫色方塊,並將 fadeInOut
動畫應用於其上。這裡用到了 animation
屬性,其中包含幾個重要的設定:
infinite
: 讓動畫無限次循環。ease-in-out
: 使動畫在開始和結束時逐漸加速和減速,達到更平滑的效果。這樣的組合讓方塊在 3 秒內完成一個淡入淡出的循環,並且以平滑的方式不斷重複。