如何使用 CSS3 过渡和变换来创建动画

有趣的动画可以使用 CSS3 通过使用变换和过渡来创建。 变换用于使元素从一种状态更改为另一种状态。 例如旋转、移动、倾斜和缩放元素。 如果没有转换，正在转换的元素会突然从一种状态变为另一种状态。 为了防止这种情况，可以添加一个过渡，以便您可以控制更改，使其看起来更平滑。

如何使用 CSS3 变换

有几种常用的变换类型。 在本教程中，我们将专注于 2D 示例，但很高兴知道 3D 变换也可以完成很酷的事情。 （一旦你掌握了 2D，3D 会容易得多！）

在以下示例中，原始矩形为深绿色，转换后的矩形更透明一些。

翻译

translate()方法将元素从当前位置移动到新位置。
使用此代码，调整后的矩形从当前位置向右移动 40 像素，向下移动 100 像素。

 -ms-transform: translate(40px, 100px); /* IE 9 */
    -webkit-transform: translate(40px, 100px); /* Safari */
    transform: translate(40px, 100px);

旋转

rotate()方法将元素顺时针或逆时针旋转指定的度数。 此代码将矩形顺时针旋转 40 度。

-ms-transform: rotate(40deg); /* IE 9 */
    -webkit-transform: rotate(40deg); /* Safari */
    transform: rotate(40deg);

规模

scale()方法增加或减少元素的大小（根据给定的宽度和高度参数）。 在此示例中，调整后的矩形比其原始宽度大两倍，比其原始高度大三倍。

 -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);

歪斜X

使用skewX() ，只有 x 轴会受到影响。 这个矩形沿 x 轴倾斜 30 度：

  -ms-transform: skewX(30deg); /* IE 9 */
    -webkit-transform: skewX(30deg); /* Safari */
    transform: skewX(30deg);

偏斜

这是相同的想法，但在 y 轴上。 skewY()方法将元素沿 y 轴倾斜定义的角度。 该矩形沿 y 轴倾斜 30 度。

-ms-transform: skewY(30deg); /* IE 9 */
    -webkit-transform: skewY(30deg); /* Safari */
    transform: skewY(30deg);
}

偏斜

如果您想同时倾斜 x 轴和 y 轴，这可以在一个地方完成。 skew()方法使用指定的角度沿 x 和 y 轴倾斜元素。 以下示例将矩形元素沿 x 轴倾斜 30 度，沿 x 轴倾斜 20 度。

-ms-transform: skew(30deg, 20deg); /* IE 9 */
    -webkit-transform: skew(30deg, 20deg); /* Safari */
    transform: skew(30deg, 20deg);

矩阵

这就是事情变得有趣的地方，但在正确的情况下也会更有效率。 如果您要进行大量变换并且不想单独写出它们，则可以将这些 2D 变换与matrix()方法结合使用。

以下是要遵循的基本大纲：

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

请注意，需要进行一些研究才能得出矩阵中的值。 这是一个有用的入门指南。

为了做这个例子，这里是矩阵值：

  -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(2, -0.3, 0, 1, 0, 0);

如何使用 CSS3 过渡

现在已经介绍了转换，重要的是要注意它们经常与转换一起使用。 这将在以下设计示例中更有意义。

请记住，可以自定义值以按照您的意愿在元素的两种状态之间进行转换。 将其视为更改 CSS 属性时控制动画速度的一种方式。 您可能遇到的一个示例是，如果您将鼠标悬停在按钮上。 当您将鼠标悬停在它上面时，通常会看到“缓慢变暗”，而不仅仅是快速变暗的颜色。 这种“缓慢变暗”是通过过渡产生的。

如果您要指定很多值，速记将派上用场。 transition CSS 属性是transition-property 、 transition-duration 、 transition-timing-function和transition-delay的简写属性。

过渡细节

transition-property指定将应用过渡的 CSS 属性，因为您可以将过渡应用到单个属性。 将过渡应用于单个属性的示例将在背景或变换上。 如果您想定位站点上的所有属性，则可以将 transform 属性设置为all 。

transition-duration有助于使属性的更改在指定时间内而不是立即发生。 您将看到秒和毫秒作为可能的值。

transition-duration: 7s;
transition-duration: 120ms;
transition-duration: 2s, 3s;
transition-duration: 10s, 30s, 230ms;

transition-timing-function CSS 属性可让您建立加速曲线，以便过渡的速度可以在其持续时间内变化。 有很多选择可以尝试。

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

transition-delay是不言自明的。 指定的值设置在过渡效果开始之前要等待的秒数或毫秒数。 Initial会将属性设置为其默认值。 如果指定了inherit ，这意味着它从其父元素继承属性。

Here are all the properties:
transition-property: background; //all
  transition-duration: 1s;
  transition-timing-function: linear; //other options are ease
  transition-delay: 0.5s;

这是过渡的基本速记设置：

div {
  transition: [property] [duration] [timing-function] [delay];
}

完整的速记序列：

div {
  transition: background 1s linear 0.5s;
}

动画策划

在您创建真正详细的动画之前，最好在创建完全疯狂的东西之前退后一步（特别是如果它将在网络上公开）。 添加一些有趣的天赋并没有错，但过度动画很诱人。 您创建的动作应该传达意义并增强用户体验，而不是分散注意力。 话虽如此，是时候开始创作了！

我确实想指出，本教程中有动画 gif 来显示动画。 GIF 是重复的，这通常不会用于设计。 重复它们的目的仅用于演示目的。

使用 CSS 变换属性移动图像

在我们进入复杂的变换和过渡之前，让我们先谈谈轴网格上的坐标。 （注意：这可能会让人想起数学课程中的方格纸。）坐标用于移动图像。

X 和 y 坐标

事情看起来会与您预期的略有不同。 -y 值在 x 轴上方。 HTML 和 CSS 使用所谓的“倒置笛卡尔坐标系”，因为网页从左上角开始向下阅读。

动画一：水平运动的基本变换

我们简要介绍了 translate() 以及它如何移动元素。 当付诸实践时，它真的可以让你的船飘起来，从字面上看。 正如我们在上面了解到的， translate() 方法将元素从其当前位置移动（根据给定的 x 轴和 y 轴参数）。

第一个项目将是移动潜艇图形。 潜艇需要不时出现空中，所以我们会小心地用translate()设置它的样式。

要使用transform: translate(x,y)将其从初始位置移动，必须指定两个新值。 要使潜艇向右和向上移动，x 值应为正，y 值应为负。 如果 y 值设置为 0，它只会向右移动而不是向上移动。

使用 transform() 使潜艇升空

在本例中，我们将对象向右移动 200 像素，向上移动 25 像素。 语法是transform: translate(200px,-25px); 并且对象将在.underwater的悬停上移动。 通过在.underwater:hover .move-right中创建运动样式，该动作将在悬停时发生。

这是起始 HTML：

<div class="underwater">
  <div class="object submarine move-right">
  	<!-- image is set as a background image on submarine -->
  </div>
</div>

在 Codepen 上看到这个。

制作这个基本动画真的不需要很多 CSS：

.underwater {
  position: relative;
  min-height: 600px;
  background-color: #4fc3da;
}

.underwater:hover .move-right{
    transform: translate( 200px ,-25px );
    -webkit-transform: translate( 200px ,-25px ); /** Chrome & Safari **/
    -ms-transform: translate( 200px ,-25px ); /** Firefox **/
}

.submarine {
  height: 200px;
  background: url("little-submarine.svg") no-repeat;
}

.object {
  transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -ms-transition: all 2s ease-in-out; /** Opera **/
}

如您所见，我们的坐标将落在右上角的正方形中。 悬停时，潜艇由于变换而向上移动到新坐标。

由于过渡，事情看起来很顺利。 transition-duration设置为2sec ，这对于这个动画来说并不算太快。 transition-timing-function设置为ease-in-out ，使其开始和结束速度较慢。 如果将持续时间增加到更大的时间，这将非常明显。

基础动画二：带关键帧和动画的水平移动

在这个例子中，Transform 的使用略有不同。 关键帧和动画属性将用于创建下一个动画。

关键帧基础

在@keyframes中，您可以定义动画的样式和阶段。 这是我们将使用的示例，这将有助于产生“向下移动时淡入”效果：

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translate(0, 0);
  }

  100% {
    opacity: 1;
    transform: translate(0, 30px);
  }
}

变换值被合并到关键帧中。 原始位置设置为 0%，设置为 100%，位置将向下移动 30px。

动画基础

要使用 CSS3 动画，您需要为动画指定关键帧。

如何使用 CSS 特征查询

网页设计的世界是不断变化的，跟上 CSS 的新设计趋势是令人兴奋的。 如果您是 CSS 的早期采用者，您可能已经期待使用 CSS Grid 之类的东西...

就像上面设计的一样， @keyframes保存元素在特定时间的样式。

无论何时执行此操作，请确保为动画指定一个描述性名称。 在这种情况下，我们使用了fadeOut 。 任何包含fadeOut的类都将被应用。 在动画的各个阶段，“from”设置为 0%，“to”设置为 100%。 这个例子非常简单，只有两个阶段，但中间肯定可以添加更多步骤。

具有动画子属性的特定操作

动画属性用于在 CSS 选择器中调用@keyframes 。 动画可以而且通常会有多个子属性。

关键帧定义了动画的样子； 子属性定义动画的特定规则。 动画序列应该如何进行的时间、持续时间和其他关键细节都包含在子属性中。

以下是动画子属性的一些示例：

• Animation-name： @keyframesat-rule的名称，描述动画的关键帧。 前面示例中的名称fadeOut是animation-name的示例。
• Animation-duration：动画完成一个完整周期所需的时间长度。
• Animation-timing-function：动画的时序，特别是动画如何通过关键帧过渡。 该功能具有建立加速度曲线的能力。 示例是linear 、 ease 、 ease-in 、 ease-out 、 ease-in-out或cubic-bezier 。
• Animation-delay：元素加载到动画开始之间的延迟。
• Animation-iteration-count：动画应该重复的次数。 想让动画永远持续下去吗？ 您可以指定infinite以无限期地重复动画。
• Animation-direction：这决定了动画是否应该在每次运行序列时交替方向或重置到起点并重复自身。
• Animation-fill-mode：动画在执行之前和之后应用的值。
• 动画播放状态：使用此选项，您可以暂停和恢复动画序列。 示例包括none 、 forwards 、 backwards或both 。

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

这是用速记写成的样子：

animation: 4s ease-in-out 1 paused fadeInDown;

这是HTML结构：

<div class="underwater">

    <div class="content-wrap fadeInDown">

    <div class="submarine"></div>

      <h2>Cute Submarine</h2>

      <p>Text here.</p>

    </div>

</div>

fadeInDown类使潜艇和内容上下移动。

通过调整关键帧使动画更流畅

使用更多的关键帧，我们可以使动画更加流畅。

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translateY(5px);
  }

  25% {
    opacity: .9;
    transform: translateY(15px);
  }

  50% {
    opacity: 1;
    transform: translateY(30px);
  }

  75% {
    opacity: 1;
    transform: translateY(15px);
  }

  100% {
    opacity: .9;
    transform: translateY(0);
  }
}

在 Codepen 上看到这个。

调整动画的时间

添加更多关键帧有助于平滑动画，但我们可以使用更多关键帧和包含所有文本的 div 上的文本延迟添加更多交互性。 让潜艇从文本中反弹是一种有趣的效果，因此将延迟线与潜艇的运动保持一致就可以实现这一点。

HTML 将应用有效的类：

<div class="underwater">

    <div class="submarine move-down fadeInDown"> </div>

    <div class="moving-content move-down text-delay fadeInDownText">

      <p>Text goes here.</p>

    </div>

</div>

这是允许交互式动画的更新 CSS：

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translateY(0);
  }

  25% {
    opacity: 1;
    transform: translateY(15px);
  }

  50% {
    opacity: 1;
    transform: translateY(30px);
  }

  75% {
    opacity: 1;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDownText {
  0% {
    opacity: .8;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(35px);
  }
}

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

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

 .move-down{
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.text-delay {
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-delay: 2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

在 Codepen 上看到这个。

CSS3动画中的三次贝塞尔进度条

是时候通过制作进度条来庆祝我们的动画进度了！

我们所涵盖的所有概念都将汇集在一起​​，创造出这样的东西。 进度条是一个非常常见的 UI 元素，因此创建类似这样的功能将帮助您了解如何为其他 Web 元素设置动画。

这是起始 HTML：

<div class="container">
  <div class="row">
    <div class="masthead">
      <p>CSS3 Loading Bar</p>
    </div>
  </div>
 <div class="fast-loader"></div>
</div>

以及使它变得栩栩如生的CSS：

@keyframes speedSetting {
  0% { width: 0px; }
  100% { width: 100%; }
}

@keyframes progressMotion {
  0% { opacity: 1; }
  50% {opacity: 1; }
  100% { opacity: 0; }
}

.fast-loader {
  width: 0px;
  height: 10px;
  background: linear-gradient(to left, blue,rgba(255,255,255,.0));
  animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite;
-webkit-animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite;
}

在第一组关键帧中，宽度从 0 变为 100%，持续时间为 2 秒。 progressMotion中的关键帧正在控制不透明度。

CSS 贝塞尔曲线

cubic-bezier()函数可以与transition-timing-function属性一起使用，以控制转换在其持续时间内如何改变速度。 你会在动画中看到这一点。 看看它是如何开始慢一点然后加快步伐的？

将贝塞尔包装器描绘成正方形会很有帮助。 左下和右上是关键点所在的地方，分别是P0和P3。 这些始终设置为 (0,0) 和 (1,1)，它们不会改变。 但是，如果您使用 x 或 y 值指定新点，则可以使用cubic-bezier()函数移动 P1 和 P2。

• x1 是控制点 p1 的 x 坐标
• y1 是控制点 p1 的 y 坐标
• x2 是控制点 p2 的 x 坐标
• y2 是控制点 p2 的 y 坐标

以下是一些示例值：

x1 = .7
y1 = .16
x2 = .2
y2 = .9

因此，一个示例可能如下所示：

cubic-bezier(.7,.16,.2,.9)

进度条是贝塞尔曲线如何自定义动画时间的一个很好的例子。 通过变换、过渡和许多其他选项，可以轻松创建自定义动画。 希望看到这些基本的 CSS3 动画示例可以帮助您了解还有哪些其他可能性。

接下来是什么：您会喜欢的 WordPress 插件

下载此电子书以获取我们最推荐给开发人员的插件列表！ 我们发现所有这些插件都易于使用，不会对您的网站造成太大影响，而且非常可靠。