使用 CSS 动画和过渡让您的网页栩栩如生

已发表: 2017-10-09

网站设计不断发展。从响应式设计、漂亮的排版、完美的颜色编码方案、插图，网站创建者每天都在想出新的想法和设计。

由于互联网上提供了如此高质量的内容，现在用户对用户界面有很高的期望。随着网站界面的不断发展，其背后的技术也在不断发展。负责增强网站界面的一个主要组件是CSS 。

CSS 或级联样式表负责通过定义样式、布局和设计来使网站更具交互性。 CSS 的最新标准 CSS3 引入了动画和转换的概念，通过增加用户界面的深度来增强用户体验。使用 CSS 动画和过渡，您可以讲故事、创建华丽的效果并使用户与您的网站的交互更加有效和有意义。

动画只是通过一个接一个地显示一系列对象（如图片）创建的运动模拟。另一方面，转换基本上是对象从一种状态变为另一种状态的过程。但是，当我们谈论网络动画时，基本上有三种类型——CSS 动画或关键帧动画、 CSS 过渡和JavaScript 动画。

CSS 动画

要在 CSS 中创建动画，我们需要在一段时间内更改元素（例如图像或文本）的 CSS 属性。我们可以根据需要多次更改元素的属性，也可以设置动画的持续时间。

指定@keyframes

CSS 动画是用关键帧定义的。这些关键帧是动画的中间点。所有 CSS 动画都在 @keyframes 规则下指定。这些关键帧指定元素在特定时刻发生的情况，即，

什么属性正在改变
当元素动画时
元素如何动画

您可以将自己的关键帧定义为：

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

这里的“to”和“from”指定动画的开始和结束。我们还可以为开始和结束之间的中间时刻指定动画，如下所示：

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

这里 0% 代表动画的开始，100% 代表动画的结束，50% 表示开始和结束之间的变化。但是，我们如何告诉浏览器动画应该发生多少时间？我们在某些动画属性的帮助下做到这一点。这些动画属性与要制作动画的元素相关联。例如：

element_name
{
animation_property: value;
style_property: value;
}

这里 element 可以是任何 HTML 标签，例如 div、span、img、p 等， style_property是任何 CSS 样式属性，例如 background_color、width、height 等。现在让我们详细了解一些动画属性。

@keyframes ：关键帧用于指定动画代码，如上所述。
animation-name ：@keyframes 指定的名称是动画的名称。此名称用于引用要设置动画的元素的关键帧。
animation-duration ：用于指定动画的持续时间，以秒或毫秒为单位。例如，如果我们将其设置为 5 秒，那么动画将只运行 5 秒。如果我们不设置这个属性，那么动画将根本不会运行，因为它的默认值为 0。
animation-delay ：我们可以通过指定动画延迟时间来延迟动画的开始。例如，如果您想在页面加载到浏览器后 5 秒开始动画，只需将 animation-delay 设置为 5s。
animation-direction ：我们可以通过这个属性告诉浏览器动画是反向移动还是交替循环。例如，如果您希望动画从头到尾运行，则将动画持续时间的值设置为“正常”。如果您希望它从头到尾运行，则只需将值设置为“反向”。
animation-fill-mode ：我们可以在动画不使用此模式播放时指定元素的样式，即当动画延迟或完成时，元素的样式应该是什么。
animation-iteration-count ：动画可以播放的次数由该属性表示。例如，如果您想播放动画一次将其设置为 1，或者如果您希望动画永远播放，只需将其设置为“无限”。
animation-timing-function ：该属性用于指定动画的速度曲线，如线性、加速或减速。
Animation ：它是设置所有动画属性的简写属性。

例如，您可以使用以下代码片段为弹跳对象设置动画。注意这里是如何使用动画的速记符号的。

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}

.stage:hover .object {
 animation: slide 2s linear;	/*shorthand animation property*/
}

.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

过渡

基于某些计时函数（也称为缓动函数），CSS 过渡应用于元素的属性一段时间。计时功能是指将元素的属性从一种状态更改为另一种状态的功能，例如线性进展、加速或减速。您可能已经注意到图像在悬停时滑动或转换为另一张图像，或者在鼠标单击时播放声音。这些都是可以使网站具有交互性的过渡效果。

缓动函数对于创建过渡很重要。它们指定属性将如何更改。它们还可以改变属性值从过渡的起点到终点的变化率。您可以通过以下方式应用转换：

element 
{
style_property: value;
transition_property: value;
}

这里 element 指定要转换的 HTML 元素，如 div、H1、img 等。style_property 是应用于该元素的 CSS 样式。现在让我们看一些过渡属性：

transition-property ：过渡效果将始终应用于元素的 CSS 属性，例如其宽度、高度、颜色或形状。此属性的值指定元素的 CSS 属性。只要此属性发生变化，例如鼠标悬停或单击时，过渡效果就会开始。
transition-timing-function ：这是要应用于元素的缓动函数。该属性用于指定缓入、缓出、线性等过渡的速度曲线。
transition-duration ：它就像动画持续时间属性。它用于指定过渡效果的持续时间，以秒或毫秒为单位。例如，如果我们将其设置为 5 秒，则转换效果将在 5 秒内完成。如果我们不设置此属性，则根本不会有过渡，因为它的默认值为 0。
transition-delay ：通过这个属性，我们可以指定延迟过渡效果的持续时间。例如，如果要在鼠标悬停 5 秒后启动效果，只需将 transition-delay 设置为 5s。
transition ：它是将上述所有过渡属性设置在一起的简写属性。

例如，以下代码将在鼠标悬停时更改 div 元素的宽度。请参阅此处应用的转换简写属性。

div { 
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

动画与过渡

Animations vs. Transitions

动画和过渡之间的相似之处

过渡和动画都用于可视化元素属性的变化。
我们可以指定过渡和动画应该发生多长时间的持续时间。
我们有一些计时函数来改变从一个值到另一个值的转换和动画的速率。

动画和过渡之间的差异

CSS 过渡是反应式的。它们需要由用户触发。另一方面，动画在页面加载到浏览器时运行。它们不需要被触发。
转换运行一次然后停止。然后，我们必须在动画可以循环时一次又一次地触发它们。他们可以在自己的站点开始，然后重新开始。
浏览器自己负责转换。我们只需要指定转换的开始和结束。我们可以设置过渡效果，但不能改变过渡的变化率。例如，如果图像在鼠标悬停时滑动，当我们将鼠标悬停在它上面时，我们只会看到它淡入或淡出。
另一方面，动画提供了在开始和结束之间更改属性的灵活性。这在关键帧的帮助下发生。例如，我们可以将图像的颜色在前 5 秒设置为红色，然后在接下来的 5 秒设置为蓝色，然后在接下来的 5 秒设置为绿色，在动画的最后 5 秒设置为黄色。因此，我们可以控制动画。

供应商前缀

并非所有浏览器都支持所有 CSS3 功能。因此，我们在这些 CSS 属性中为特定浏览器使用前缀，例如 -webkit- (Safari)、-moz- (Firefox) 或 -o- (Opera)。这允许浏览器标记添加对该 CSS3 功能的支持。这些前缀称为供应商前缀或CSS 浏览器前缀。因此，我们还需要将供应商前缀与动画和过渡属性一起放置。例如，考虑下面的代码，看看如何使用 Safari 的供应商前缀：

div {
width: 100px;
height: 100px;
background: red;

/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;

/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

小费！ 您可以使用诸如-prefix-free之类的库来避免这种麻烦。它是一个 JavaScript 库，可以将当前浏览器的前缀添加到任何 CSS 代码中。查看网络上提供的许多此类库。

结论

网站开发人员可以应用动画和转换来吸引用户访问您的网站。您可以使用它们来增强表单、通知、背景图形、图像、图表、涂鸦、号召性用语按钮等等。只要发挥你的想象力，你就能找到一种让用户惊叹的方法。请记住，即使您的网站发生很小的变化，也可以使它看起来更好，并增加其价值。那么，您在您的网站上使用过动画吗？分享您对使用动画和过渡的想法。