CSS Hinge 教程：學習如何創建平滑和逼真的動畫

一、介紹

CSS Hinge 是一種 CSS3 動畫效果，可以創建非常逼真的門鉸鏈效果。該動畫可以使物體彷彿是在真實世界中運動，因此非常適合在設計和開發中應用。

二、實現 CSS Hinge 動畫

要創建 CSS Hinge 動畫，需要使用 CSS3 動畫和關鍵幀。以下是一些基本的 CSS3 屬性和樣式，您可以在自己的項目中使用它們：

.hinge {
  position: relative;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

使用上面的 CSS 屬性和樣式，將其添加到 HTML 元素中，例如一個 div 元素，如下所示：

<div class="hinge">
  <p>我是一段文字。</p>
</div>

現在，當您預覽頁面時，您將看到該 div 元素彷彿像一個門鉸鏈一樣傾斜倒下。

三、如何改進 CSS Hinge 動畫效果

如果您想嘗試其他的 CSS Hinge 變化，以下是一些想法：

• 變化順序：嘗試更改 CSS 關鍵幀動畫中的百分比，以更改運動的時間和變化的順序。例如，要防止制動效果，您可以通過在 @keyframes 中更改 20% 和 60% 的值來達到此目的。
• 動畫屬性：您可以更改 CSS3 動畫和關鍵幀中使用的屬性，例如持續時間、變換原點和定時函數，以使動畫更符合您的需求。
• 結合其他動畫：您可以結合其他 CSS3 動畫效果，例如漸變或淡入淡出效果，以創造更好的動畫效果。

下面是一個例子，展示了如何將 CSS Hinge 動畫與 CSS 漸變效果結合使用：

.hinge {
  position: relative;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes hinge {
  /* ... */
}

@keyframes hinge {
  /* ... */
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transition: background-color 2s ease-in-out;
  transition: background-color 2s ease-in-out;
  background-color: #f00;
}

.hinge:hover {
  background-color: #00f;
}

在上面的例子中，您可以看到該元素不僅具有 CSS Hinge 運動，還具有過渡到不同背景顏色的效果。此外，當您將鼠標懸停在該元素上時，會觸發背景顏色的逐漸淡化效果。

四、結論

CSS Hinge 動畫效果是一個非常有趣的動畫效果，非常適合用於設計和開發工作中。它可以通過 CSS3 進行實現，並可以與其他 CSS3 動畫效果結合使用，以創造更複雜的動畫效果。希望這篇文章對您有所幫助。