电子邮件中的 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 上编辑示例