電子郵件中的 CSS 動畫

簡介

此範例示範如何在 AMP for Email 中執行數個 CSS 轉換動畫。

設定要製作動畫的物件

為具有圓角的正方形設定一些 CSS。這就是我們要製作動畫的物件。

  .object{
    display: inline-block;
    border-radius: 20%;
    height: 100px;
    width: 100px;
    margin: 10px;
  }

傾斜動畫

將滑鼠游標停留在正方形上，即可查看物件動畫轉換成傾斜位置。

<div class="object skew"></div>

以下 CSS 定義了將物件傾斜 -20 度 (x,y) 的動畫。轉換持續時間設定為 0.4 秒，動畫效果設定為 ease-in-out。

.skew {
  background-color: #f53b57;
  transition: transform .4s ease-in-out;
  transform: skew(0deg, 0deg);
}

.skew:hover{
  transition: transform .4s ease-in-out;
  transform: skew(-20deg, -20deg);
}

旋轉動畫

將滑鼠游標停留在正方形上，即可查看物件旋轉。

<span>
  <div class="object rotate"></div>
  <div class="object rotate origin"></div>
  <div class="object rotate three-dimension"></div>
</span>

以下 CSS 定義了滑鼠游標停留在上方時的動畫，此動畫會使物件繞著不同的原點旋轉，包括三維旋轉。

.rotate {
  background-color: #3c40c6;
  transition: transform .6s ease-in-out;
}

.rotate:hover{
  transition: transform .9s ease-in-out;
  transform: rotate(280deg);
}

.rotate.origin {
  background-color: #3c40c6;
  transition: transform .6s ease-in-out;
  transform: rotate(0deg);
  transform-origin: top left;
}

.rotate.origin:hover{
  transition: transform .9s ease-in-out;
  transform: rotate(-280deg);
  transform-origin: top left;
}

.rotate.three-dimension:hover{
  transition: transform .9s ease-in-out;
  transform: rotate3d(1, 2, -1, 280deg)
}

平移動畫

將滑鼠游標停留在正方形上，即可查看物件動畫轉換到新位置。

<span>
  <div class="object movexy one"></div>
  <div class="object movexy two"></div>
  <div class="object movexy three"></div>
</span>

以下 CSS 定義了平移動畫，此動畫會將物件移動到新位置 (x,y)。

.movexy {
  background-color: #05c46b;
  transition: transform .4s ease-in-out;
  transform: translate(0px, 0px);
}

.movexy.one:hover{
  transition: transform .4s ease-in-out;
  transform: translate(0px, -50px);
}

.movexy.two:hover{
  transition: transform .4s ease-in-out;
  transform: translate(0px, 50px);
}

.movexy.three:hover{
  transition: transform .4s ease-in-out;
  transform: translate(400px, -150px);
}

滾動物件

將滑鼠游標停留在正方形上，即可查看物件在視窗中滾動。

<span>
  <div class="object roll"></div>
</span>

以下 CSS 結合了轉換 (旋轉) 和平移動畫，以建立滾動效果。

.roll {
  background-color: #00d8d6;
  transition: transform 1.2s ease-in-out;
}

.roll:hover{
  transition: transform 1.4s ease;
  transform: translate(530px, 0px) rotate(360deg);
  transition-timing-function: cubic-bezier(.55,.07,.42,.54);
}

縮放動畫

將滑鼠游標停留在正方形上，即可查看物件動畫轉換成新的較大尺寸。

<div class="object scale"></div>

以下 CSS 定義了會縮放物件尺寸的動畫。

.scale {
  background-color: #ffb8b8;
  transition: transform .4s ease-in-out;
}

.scale:hover{
  transition: transform .4s ease-in-out;
  transform: scale(2);
}

沖入排水孔

將滑鼠游標停留在正方形上，即可查看物件動畫轉換到新位置。

<span>
    <div class="object drain"></div>
</span>

以下 CSS 結合了一些不同的轉換和平移，以建立物件沖入排水孔的效果。

.drain {
  background-color: #ffd32a;
  transition: transform 1.4s ease-in-out;
}

.drain:hover{
  transition: transform 1.4s ease-in-out;
  transform: scale(0) skew(-20deg) rotate(-90deg) translate(430px, 220px);
  transition-delay: .2s;
}

需要進一步說明嗎？

如果本頁面的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯絡，討論您的確切使用案例。

前往 Stack Overflow

有未說明的功\能嗎？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題提供一次性的貢獻。

在 GitHub 上編輯範例