前端开发人员如何创建CSS动画

CSS已成为前端开发人员和UI / UX专家的强大工具。请继续阅读以了解如何利用此功能并使用CSS创建动画。

在CSS中使用动画的第一步是 过渡属性。当预定义的转换不够或不适合时，就有CSS动画。

注意：在这篇文章中没有使用JavaScript。

需要前端资料可以找大神teacher_liu_666免费领取

动画属性有两个部分：关键帧和动画属性。关键帧定义动画和动画属性的阶段和样式，将关键帧分配给元素并指定动画将如何在定义的元素上运行。

关键帧

通过定义关键帧，您可以为动画设置步骤。这部分动画的语法是@keframes后跟关键帧选择器及其样式的动画名称。

@keyframes animation-name{

0%

50%

100%

}

通过使用关键帧选择器逐渐从一个样式集更改为另一个样式集创建动画。这些选择器可以具有介于0％-100％之间的值（或者来自“和”的单词“0”和100％）。使用这种语法，0％表示动画的开始，100％表示结束。

您可以制作动画的属性不是无限的，因此它们有一个列表。

现在，关于这个@keyframes 选项的最令人震惊的事情是 ：在关键帧里面使用!important CSS不仅使你的代码变得重要，而且它忽略了整个代码行...

动画属性

一旦关键帧被定义，你最好确保工作得到回报并使用它们。在要选择动画的选择器内部，添加 animation属性。该属性是八个动画属性的简写。

animation

=

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

要添加的主要属性是 animation-name 和 animation-duration。如果没有， animation-name 你不能将动画链接到关键帧，没有的话 animation-duration， yoru动画的持续时间将被设置为零，所以不会有动画。

其他属性用于更好地定义动画。 Animation-timing-function指定动画的速度曲线。它可以用预定义的值（线性，简易，易入，易出，易入出）来定义，或者可以通过步骤或立方贝塞尔值添加自定义定义。

该 Animation-delay属性与transition 属性几乎相同， 它定义了动画的开始。

默认情况下，动画将播放一次。随着animation-iteration-count您可以更改为任意数量或者将其定义为infinite。

Animation-direction属性指定动画周期 - 是否将向前，向后或交替循环播放。定义这些状态选项是normal，reverse，alternate（向前然后向后）和alternate-reverse（向后然后向前）。

该Animation-fill-mode属性定义了动画结束时或开始之前元素的样式。默认状态是none，在这种状态下，动画不会将任何样式应用于动画元素。该选项both会将第一个关键帧值设置为该元素直到它开始，并将其最后一个关键帧值设置为结束。选项forwards并backwards从中定义单独的选项both。

最后，animation-play-state您可以暂停动画并再次播放。所以，它有两个选项，running（默认）和paused。

尽管该 animation属性是所有列出选项的缩写，但通常仅将它用于animation-name和animation-duration和分别列出其他属性。

animation: icon-animation 2s;

animation-timing-function:ease;

animation-delay: 5s;

animation-iteration-count:infinite;

animation-direction:normal;

animation-fill-mode:both;

animation-play-state:running;

为了记录，可以向元素添加多个动画。

关于前缀的简短说明：包含您应该使用的所有动画属性和关键帧-webkit-。对于少数特定的已知问题，请检查caniuse。

例子

动画本身并不是在设计中具有特定目的的东西。另一方面，它可以在任何地方使用，并且会始终添加一个值。我会说特定的动画（用这个属性定义）最多用于特殊效果，并且使用过渡定义的动画用于更常见的元素，如悬停和其他状态。

此外，一些效果（如悬停效果）或者甚至是具有不寻常行为的线条，都是使用动画属性定义的。

因此，如果您需要为已完成的设计添加“那些东西”，您可以在后台或某些特定元素（加载器，滚动，悬停...）中添加特殊效果。

结语

在我看来，动画属性是“高级”CSS属性之一，所以如果你不使用它来获得哇效果，你将需要它来“掌握CSS”。如果你对用户体验感兴趣（如果不是你可能应该），那么请查看invisionapp团队关于动画的非常好的文字。

需要前端资料可以找大神teacher_liu_666免费领取