如何使用 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

这是相同的想法，但在 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 Transform 属性移动图像

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

X 和 Y 坐标

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

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

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

第一个项目是移动潜艇图形。 潜艇需要偶尔浮出水面，所以我们会用translate()仔细设计它。

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

使用 transform() 升空的潜艇

在本例中，我们将对象向右移动 200px，向上移动 25px。 语法是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 ，这使它的开始和结束更慢。 如果持续时间增加到更长的时间，这将非常明显。

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

在此示例中，转换的使用方式略有不同。 关键帧和动画属性将用于创建下一个动画。

关键帧基础

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

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

变换值被合并到关键帧中。 原来的placement设置为0%，100%时位置会向下移动30px。

动画基础

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

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

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

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

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

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

以下是动画子属性的几个示例：

• Animation-name： @keyframesat-rule的名称，它描述了动画的关键帧。 前面示例中的名称fadeOut是animation-name的示例。
• 动画持续时间：动画完成一个完整周期所需的时间长度。
• Animation-timing-function：动画的时间，具体来说就是动画如何通过关键帧进行过渡。 该功能具有建立加速度曲线的能力。 例如linear 、 ease 、 ease-in 、 ease-out 、 ease-in-out或cubic-bezier 。
• 动画延迟：元素加载时间和动画开始之间的延迟。
• 动画迭代计数：动画应重复的次数。 想要动画永远持续下去吗？ 您可以指定infinite无限期地重复动画。
• Animation-direction：这决定了动画是否应该在每次运行序列时交替方向或重置到起点并重复自身。
• 动画填充模式：动画在执行前后应用的值。
• 动画播放状态：使用此选项，您可以暂停和恢复动画序列。 示例是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%，持续时间为两秒。 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 动画示例可以帮助您了解还有哪些其他可能性。