CSS 關鍵影格動畫實際案例教學
更新日期: 2024 年 11 月 12 日
關鍵影格(Keyframes)動畫在 CSS 中可以實現豐富的動態效果,例如元素的大小、位置變化等。
透過以下的四個實際案例,我們將逐步學習如何使用 CSS 關鍵影格動畫,並了解使用中的一些注意事項。
案例一:改變正方形的長寬
這個案例展示了如何讓一個正方形的高度和寬度變化,形成漸變的動畫效果。
HTML 結構
<div class="box">
<div class="item"></div>
</div>
CSS 代碼
@keyframes colorsqur {
0% {
width: 40px;
height: 40px;
}
25% {
width: 40px;
height: 100%;
}
50% {
width: 40px;
height: 40px;
}
75% {
height: 40px;
width: 100%;
}
100% {
width: 40px;
height: 40px;
}
}
.box {
width: 200px;
height: 200px;
background: #000;
position: absolute;
inset: 0;
margin: auto;
}
.item {
width: 40px;
height: 40px;
background: #fff;
animation: colorsqur 2s infinite;
}
注意事項
一個元素只能應用一個動畫效果。
如果我們嘗試在 .item
中同時設置兩個動畫,例如 colorWidth
和 colorHeight
,最後一個動畫會覆蓋前面的動畫,導致只能看到最後設定的動畫效果。
.item {
animation: colorWidth 0.5s infinite alternate;
animation: colorHeight 0.5s infinite alternate;
}
案例二:上下移動的動畫效果
此案例讓元素在容器內部上下移動,並會重複播放。
HTML 結構
<div class="box">
<div class="item"></div>
</div>
CSS 代碼
* {
padding: 0;
margin: 0;
}
.box {
width: 150px;
height: 150px;
background: #000;
position: absolute;
inset: 0;
margin: auto;
}
.item {
width: 40px;
height: 100px;
background: #fff;
position: absolute;
bottom: 0;
margin: 1rem;
animation: change 1s infinite alternate;
}
@keyframes change {
from {
bottom: 0;
}
to {
bottom: 25px;
}
}
注意事項
注意事項:避免使用 flex
的位置屬性進行動畫
使用 flex
的位置屬性(如 align-self
)進行動畫,可能會導致效果顯得不夠連續。
這是因為 align-self
在切換位置時不具備平滑的過渡效果。
以下代碼使用 align-self
來改變元素在 flex
容器中的位置。這樣的設定會導致動畫效果在切換時缺乏平滑過渡,顯得生硬:
.box {
display: flex;
width: 150px;
height: 150px;
background: #000;
padding: 1rem;
position: absolute;
inset: 0;
margin: auto;
}
.item {
width: 40px;
height: 110px;
background: #fff;
align-self: flex-start;
animation: change 0.5s infinite alternate;
}
@keyframes change {
0% {
align-self: flex-start;
}
50% {
align-self: center;
}
100% {
align-self: flex-end;
}
}
案例三:動態高度變化的動畫
這個案例展示如何讓元素高度從 0 逐漸展開到容器的高度,並形成反向收縮的動畫效果。
HTML 結構
<div class="box">
<div class="item"></div>
</div>
CSS 代碼
* {
padding: 0;
margin: 0;
}
.box {
width: 150px;
height: 150px;
background: #000;
position: absolute;
inset: 0;
margin: auto;
}
.item {
width: 40px;
height: 0;
background: #fff;
position: absolute;
top: 0;
margin: 1rem;
animation: change 1s infinite alternate;
}
@keyframes change {
from {
height: 0px;
}
to {
height: calc(100% - 2rem);
}
}
在這個動畫中,.item
的高度從 0 開始逐漸展開,直到容器的高度,再逐步收縮,重複此效果。
案例四:高度和位置的結合變化
這個案例示範了在變更高度的同時,也改變位置,使元素看起來有上下移動的動畫效果。
HTML 結構
<div class="box">
<div class="item"></div>
</div>
CSS 代碼
* {
padding: 0;
margin: 0;
}
.box {
width: 150px;
height: 150px;
background: #000;
position: absolute;
inset: 0;
margin: auto;
}
.item {
width: 40px;
height: 0;
background: #fff;
position: absolute;
margin: 1rem;
top: 0;
animation: change 1s infinite;
}
@keyframes change {
0% {
top: 0;
height: 0;
}
50% {
top: 0;
height: calc(100% - 2rem);
}
100% {
top: calc(100% - 2rem);
height: 0;
}
}
注意事項:保持動畫基準點的一致性
在此動畫中,為了保持動畫效果的平滑連續性,我們使用 top
作為基準位置。如果在動畫的最後階段將 top
改為 bottom
,會因為基準點的變動導致動畫銜接不自然。
非推薦用法:在最後使用 bottom
作為基準
如果在動畫的最後階段將 top
改為 bottom
,動畫會顯得不順暢,因為元素的基準點在過程中發生了變動,導致動畫的銜接變得生硬。例如:
* {
padding: 0;
margin: 0;
}
.box {
width: 150px;
height: 150px;
background: #000;
position: absolute;
inset: 0;
margin: auto;
}
.item {
width: 40px;
height: 0;
background: #fff;
position: absolute;
margin: 1rem;
animation: change 1s infinite;
}
@keyframes change {
0% {
top: 0;
height: 0;
}
50% {
top: 0;
height: calc(100% - 2rem);
}
100% {
bottom: 0;
height: 0;
}
}
這段代碼中,在 100%
時將基準位置從 top: 0
切換為 bottom: 0
,使動畫銜接時會出現不連續的跳動效果,因為元素的基準點變動導致其位置的突然改變。
為了保持動畫連續,建議在整個動畫過程中保持基準點一致,不要在中途切換。
總結
通過這四個案例,我們學習了如何在 CSS 中使用關鍵影格來控制元素的長寬變化、位置變化和高度的變化。
以下是幾點總結:
- 單一動畫限制:一個元素同時只能應用一個動畫效果,避免後面的動畫覆蓋前面的設定。
- 動畫連貫性:使用數值屬性來設置漸變效果,可以讓動畫更連續和順暢。
- 基準點設置:在設置高度和位置變化時,保持一致的基準點(如
top
或bottom
),可以增強動畫的連貫性。
透過這些範例,我們可以掌握如何用 CSS 關鍵影格動畫來增強網頁的動態效果。