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 中同時設置兩個動畫,例如 colorWidthcolorHeight,最後一個動畫會覆蓋前面的動畫,導致只能看到最後設定的動畫效果。

.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 中使用關鍵影格來控制元素的長寬變化、位置變化和高度的變化。

以下是幾點總結:

  1. 單一動畫限制:一個元素同時只能應用一個動畫效果,避免後面的動畫覆蓋前面的設定。
  2. 動畫連貫性:使用數值屬性來設置漸變效果,可以讓動畫更連續和順暢。
  3. 基準點設置:在設置高度和位置變化時,保持一致的基準點(如 topbottom),可以增強動畫的連貫性。

透過這些範例,我們可以掌握如何用 CSS 關鍵影格動畫來增強網頁的動態效果。

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *