作者：Joel Olawanlet 来源：blog.logrocket.com 译者：JackChen007

前言

许多年前，网站更专注于向用户显示信息，而没有考虑如何创建视觉体验以使网站更加用户友好。在过去的几年中，许多事情发生了变化：网站所有者正在创造视觉体验，以使用户留在自己的网站上。

开发人员发现，由于我们对运动的自然反应，人类倾向于更多地关注运动的物体。

通过扩展，将动画添加到您的网站或应用程序中是吸引用户注意您网站的重要区域并显示有关产品的更多信息的一种非常重要的方法。

注意：有效的动画能够在用户和屏幕上的内容之间建立牢固的联系。

什么是网页动画？

网页动画基本上只是使事物在网页上移动。

网页动画对于创建引人注目的网站是必不可少的，这些网站可以实现更好的转换并吸引用户点击，查看和购买您网站上的东西。

如果做得好，动画可以增加有价值的互动，增强用户的情感体验，并为界面增加个性。

当前，有数百种库，工具和插件可用于创建从简单到复杂的动画。使用CSS动画，无需使用会降低网站速度的插件，而使用CSS可以轻松完成动画。

在本文中，我将向您展示一些可以通过HTML，CSS和JavaScript实现的动画。

我可以设置哪些CSS属性动画？

知道如何制作动画是一回事，知道制作什么是另一回事。

一些CSS属性可以是动画的，这意味着它们可用于动画和过渡中。

这些属性可以从一个值逐渐更改为另一个值，例如大小，颜色，数字，形状，百分比等。

我们可以为背景，背景色，边框颜色，滤镜，柔韧性和字体等属性设置动画。

您可以去MDN官网文档获得动画的所有属性的完整列表。

不同类型的动画

网站上有很多种类繁多的动画，它们在使用中非常有用，并且在用户体验中起着非常重要的作用。比如：

工具提示（Tooltips）

工具提示是当用户将鼠标悬停，聚焦或触摸元素时显示的文本标签。

换句话说，这是一条简短的信息提示消息，当用户与图形用户界面（GUI）中的元素进行交互时出现。

工具提示可能包含有关其功能的简短帮助文本：

鼠标移入（Hover）

当您将鼠标移入到元素上时，悬停伪类用于为元素添加特殊效果。这样，当用户将鼠标悬停在某个项目上时，它便能够引起用户的注意。

这是显示哪些元素可单击的有用方法。

加载中（Loading）

页面加载中非常重要，因为它们有助于在加载期间使用户感到愉悦。它们还通知用户进度级别，或者完成加载还剩下多少时间。

输入项（Inputs）

输入动画很棒，经常与工具提示和验证结合在一起。使用输入，用户可以快速修复错误并填写缺少的字段以填写表格。

菜单项（Menus）

菜单上的动画在 UI / UX 中扮演着非常重要的角色。菜单是一种动画类型，它让用户感到惊奇，并保持互动性，允许他们看到整个页面的所有内容。

注意：还有许多其他动画，如页面切换、视差滚动效果等。

CSS动画

到目前为止，我们已经看到CSS可以实现许多不同种类的动画，但是我还没有解释它是如何完成的。

CSS使我们可以在不使用JavaScript的情况下为HTML元素设置动画。

要使用CSS动画，必须首先为动画指定一些关键帧。关键帧包含元素在特定时间将具有的样式。

为了正确理解，我将会解释我们使用的基本属性。

CSS动画由两个基本构建块组成：

@keyframes

关键帧用于指示动画的开始和结束（以及开始和结束之间的任何中间步骤）。

它由3个基本要素组成：

动画名称：这只是给动画指定的名称，如上图所示。
动画阶段：指示动画的阶段。如上图所示，它主要以百分比表示。
动画样式或CSS属性：这些是预期在动画过程中更改的属性。

动画属性

定义@keyframes后，必须添加动画属性才能使动画起作用。

这主要用于定义动画的发生方式。动画属性已添加到要设置动画的CSS选择器（或元素）。

注意动画的生效方式，两个属性非常重要。它们是动画名称animation-name和动画持续时间animation-duration。

还有其他属性，例如：

animation-timing-function：定义动画的速度曲线或速度。您可以使用以下预定义的计时选项指定计时：ease, linear, ease-in, ease-out, ease-in-out, initial, inherit。
animation-delay：此属性定义动画何时开始。该值以秒（s）或毫秒（ms）为单位定义。
animation-iteration-count：此属性指定应播放动画的次数。
animation-direction：此CSS属性设置动画是向前播放，向后播放还是在向前和向后播放序列之间来回交替播放。
animation-fill-mode：当不播放动画时（在开始之前，结束之后，或两者都播放），此属性指定元素的样式。
animation-play-state：此属性指定动画是运行还是暂停。

您想到的下一个大问题将是：我是否需要在要为元素设置动画的任何时候指定所有这些属性？其实没有。

我们具有动画速记属性。可以分别定义每个动画属性，但是为了获得更简洁，更快速的代码，建议您使用动画速记。

所有动画属性都按以下顺序添加到相同的animation动画属性中：

animation: [animation-name] [animation-duration] [animation-timing-function] 
[animation-delay] [animation-iteration-count] [animation-direction] 
[animation-fill-mode] [animation-play-state];

注意：为使动画正常运行，您需要遵循正确的速记顺序并至少指定前两个值。

在线DEMO示例：codepen.io/olawanlejoe…

这是一个非常简单的衬衫店的登录页。我决定在衬衫上添加一个很小的动画，以便在用户访问此链接后立即吸引用户的注意。

我所做的就是运用transform属性并垂直（上下）转换它。您可以花一些时间检查代码。

为什么要使用JavaScript？

在阅读过程中，您可能会开始问自己为什么在该主题中包含JavaScript。您会明白现在为什么！

那么，为什么要使用JavaScript？

我们使用JavaScript来控制CSS动画，并通过一些代码使其变得更好。

在线DEMO示例：codepen.io/olawanlejoe…

在上面的示例代码中，我创建了一个表单来收集用户详细信息，但是如果没有输入，我希望表单字段能够摇动。

借助CSS动画样式，我可以让他们动摇：

@keyframes inputMove {
    0% {
        transform: translateX(5px);
    }
    25% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
    75% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(0px);
    }
}

在上面的代码中，输入字段将以5px来回移动（从左到右），然后最终以100％返回其初始位置（如上面的代码所示，我们使用CSS transform属性来实现此目的）。

然后，我们将动画属性添加到CSS选择器错误中：

.form-control.error input {
    border: 2px solid red;
    animation-name: inputMove;
    animation-duration: .5s;
}

接下来的事情是：我怎么知道这些字段是否为空并且用户单击提交按钮？

这就是JavaScript的用武之地。我们使用JavaScript来控制动画。

步骤1：检查是否已单击表单提交按钮。
步骤2：选择所有表单字段。
步骤3：检查输入字段是否为空。
步骤4：使用JavaScript classList属性添加CSS选择器。您可以查看文档阅读有关classList属性的更多信息。

注意：我已在示例中的JavaScript和CSS代码中正确添加了注释，以便您可以轻松理解该代码。

提交带有所有适当信息的表单后，一些气泡将开始滑动。这是通过CSS动画实现的。

结语

这些只是您需要了解的有关网页动画的几件事。记住，这是一个非常广泛的主题，但是我知道您已经了解了动画的重要性以及为什么您应该考虑在项目中使用CSS动画。

原文：blog.logrocket.com/web-animati…

喜欢可以关注作者公众号【懒人码农】，我们一起学习一起进步。。。

喝一杯奶茶de时间，快速上手网页三剑客的炫酷动画制作

前言