電子郵件中的 CSS 動畫

簡介

此範例示範如何在 AMP 電子郵件中執行多種 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 上編輯範例