如何使用 CSS 制作动画

已发表: 2014-12-27

我们已经非常习惯在网站上看到动画并享受它们为网页设计带来的活力和多样性。它们引人注目，是为网站添加一些视觉趣味的好方法，并且通常会使用户的体验更加令人兴奋。

虽然传统上使用 GIF、SVG、WebGL 和背景视频来实现，但也可以使用 CSS 高效地创建动画。浏览器对 CSS 动画的支持得到了极大的改进并且变得非常流行——兼容的浏览器包括 Firefox 5+、IE 10+、Chrome、Safari 4+ 和 Opera 12+。

今天，我将通过一步一步的演示带您了解创建 CSS 动画的基础知识。在那之后留下来看看五个动画示例。您将能够使用所有这些想法为您自己的项目创建动画！

CSS动画基础

显然，在我们深入研究五种有趣的 CSS 动画之前，了解动画工作原理的基础知识很重要。
例如，关键帧是 CSS 动画的关键组件。如果您使用过 Adobe Flash 或有视频编辑经验，您可能熟悉该术语。在这种情况下，关键帧一词正是您所想的：它是一种指定特定动作的方式。

您之前可能在 CSS 样式表中遇到过@keyframes 。在这个@keyframes中，您可以定义动画的样式和阶段。这是淡出效果的一个很好的例子：

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

我们刚刚创建的淡出关键帧的基础包括：

一个描述性的名称：在这种情况下，fadeOut。
动画的阶段：From 设置为 0%，To 设置为 100%。
将在每个阶段应用的 CSS 样式。

默认情况下， From为 0%， To为 100%，因为在此示例中未指定其他阶段。

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

我们需要做更多的事情来设置样式——我们需要使用子属性来设置animation属性的样式。如果关键帧定义了动画的外观，那么动画子属性定义了动画的特定规则。这些让您可以配置动画序列应该如何进行的时间、持续时间和其他关键细节。

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

与动态图形艺术家合作

没有什么能像动画一样让您的设计栩栩如生。但是，如果您从未与动画师或运动图形艺术家合作过，那么运动可能会感觉像是一个陌生的世界。如果你正在考虑 p...

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

将它们放在一起以获得最佳浏览器支持

这里发生了很多事情，术语可能有点混乱。但是我们现在知道，关键帧定义了动画的外观以及不同的动画阶段，并且动画属性使用子属性来定义动画选项，如延迟、方向、时间等。

您可能熟悉供应商或浏览器前缀——在处理动画时这些是必需的。我们需要确保我们拥有最好的浏览器支持。以下是标准浏览器前缀：

Chrome 和 Safari： -webkit-
火狐： -moz-
Internet Explorer： -ms-

Internet Explorer 10 不需要转换前缀，但所有转换都需要前缀。 Opera 被覆盖是因为它可以识别 WebKit 样式。

过渡开始

-webkit-transition
-moz-transition
transition

变换开始：

-webkit-transform
-moz-transform
-ms-transform
transform

想尝试不同类型的动画吗？在 Photoshop 中制作 GIF！就是这样。

五个动画在行动

现在我们已经介绍了基础知识，让我们创建一些代码来使用！

动画一：圆到方

让我们详细介绍第一个，这样我们就可以确保我们理解到目前为止我们所涵盖的所有概念。动画将从一个圆圈开始，然后变成一个正方形。

首先创建一个 div 是测试动画的好方法：

&amp;lt;div class=”animationOne”&amp;gt;
&amp;lt;/div&amp;gt;

现在让我们设置我们的@keyframes 。这个动画将有五个阶段，因为正方形有四个边，我们需要有一个 0% 的起点。使用前缀，如下所示，但对于本教程的其余部分，我们将仅使用基础知识保持简单。

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

现在，让我们创建一些样式来确定每个阶段的边框半径：

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

现在添加background-color属性来帮助区分动画的每个阶段：

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

最后，让我们将动画应用到测试 div：

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

动画属性通常以简写形式编写，因此代码中的实际情况如下：

动画名称是circle-to-square 。
动画持续时间为2s 。
动画延迟为1s 。
动画迭代计数是infinite的，所以它会无限期地进行。
并且动画方向是alternate的。这意味着它将从头到尾播放并回到开头。

动画二：旋转

此动画允许旋转对象。

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

为了使我们的动画项目分开，请记住为第二个示例创建另一个 div。我添加了背景颜色，因为我们将在本示例中将动画添加到 div 本身。

此动画的持续时间为 2 秒，延迟为 3 秒。 animation-iteration-count 是 5，所以这个项目在停止之前会做 5 次动画。动画每隔奇数时间 (1,3,5,...) 反向播放，偶数时间 (2,4,6,...) 以正常方向播放。

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

动画三：展开和闪烁

这是一个很棒的按钮动画，因为与页面上的其他元素相比，它更加引人注目和突出。这也可能是值得包含在:hover状态中的东西。

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

要对此进行测试，我们需要以下起始 div：

.animationThree {
width: 200px;
height: 200px;
}

&amp;lt;div class=”animationThree&amp;gt;
&amp;lt;a class=&quot;btn pulse&quot; href=&quot;&quot;&amp;gt;Click me&amp;lt;/a&amp;gt;
&amp;lt;/div&amp;gt;

动画四：文字幻灯片
让我们为文本添加一些动画。该项目使您的文本从左侧滑入一次。

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

动画五：淡入

你有什么惊喜内容吗？查看此淡入动画，了解您希望稍后出现的内容。您在这里有很多选择：淡入可以是快的或慢的，发生一次或多次，等等。

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

&amp;lt;div class=”animationFive”&amp;gt;
&amp;lt;img src=&quot;..&quot; /&amp;gt;
&amp;lt;/div&amp;gt;

CSS3 动画非常适合让您的网站动起来！现在您已经掌握了创建动画的基本概念，动画的可能性是无穷无尽的。你会制作什么动画？