为JavaScript开发者提供的CSS动画指南-一一网

有充分的证据表明，人类的大脑对运动是有硬性规定的。人类更有可能关注元素如何移动，而不是关注静态元素。

CSS动画就是利用了这种人类行为。当动画被添加到一个网站上时，它可以将用户的注意力吸引到产品的重要区域，创造一个持久的效果，并普遍提高体验。

在这篇文章中，我们将回顾CSS动画的好处，不同的CSS动画属性，以及不同的例子，在这些例子中，JavaScript开发者可以使用CSS动画来使网站更加互动和用户友好。

每一个例子都会有一个Codepen演示和一个详细的解释，以使这些例子更加真实、实用和有价值。

CSS动画的概述

在深入了解作为一个JavaScript开发人员如何使用CSS动画之前，让我们快速回顾一下CSS动画到底是什么，为什么你需要了解它，以及它对网站的外观和感觉有什么影响。

什么是CSS动画？

顾名思义，CSS动画允许用户通过遵循一种声明式的模式对一些CSS属性进行动画处理，用户可以指定CSS属性在一段时期内的变化。

CSS动画使得从一个CSS样式配置到另一个CSS样式配置的动画过渡成为可能。

为什么你应该了解CSS动画

网络开发生态系统已经发展到一个地步，即JavaScript开发人员无法避免了解和使用CSS动画。没有动画的用户界面就像没有动作的视频游戏，而现在没有人喜欢玩纯文本的游戏了

用CSS动画来回答建立更多互动网站的需要。

CSS动画对网站有什么积极影响？

你是否曾经看过一个网站，并怀疑该页面是在加载还是坏掉了？这种常见的经历会让遇到的用户感到沮丧。

通过使用CSS动画，开发者可以通过添加一个加载动画来减轻这种挫折感，向用户发出正在发生一些事情的信号，使他们在页面上停留更长时间。

如果做得好，动画可以为网站界面增加有价值的互动、个性和有吸引力的用户体验。

动画可以使UI元素类似于现实世界，使它们平稳地变化，同时给人以连续、行动和进展的感觉，而不是一眨眼就变了。-Patrícia Silva，”如何制作CSS动画”

CSS动画的解释

动画由两部分组成：描述CSS动画的样式和表示动画样式顺序的关键帧。

让我们把这两部分分解开来，以便有效地理解它们。

描述CSS动画的样式

对于你创建的每一个动画，你都必须描述该动画的特征。这使你可以完全控制决定动画到底能做什么或不能做什么。

你可以配置的一些属性的例子包括动画的持续时间、方向和重复的次数。

要描述动画，你可以使用animation 速记属性或animation 子属性。

`Animation` 速记属性

animation 速记属性是八个animation 子属性的速记。它可以避免你在输入子属性名称时浪费时间，并为需要所有八个子属性的元素提供动画。

/* Here’s the syntax of the animation shorthand property */
.element {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

复制代码

当你将这段代码应用于一个元素时，animation 速记属性会使页面上的元素与所有八个子属性形成动画。

参见CodePen上Didicodes (@edyasikpo) 的
 Pen
动画速记属性 – CSS动画教程。

`Animation` 子属性

这八个子属性组成了实际的animation 速记属性，在CSS中配置元素的动画。当你不想同时使用所有的子属性，或者忘记了动画属性中的排列顺序时，它就变得很有用。

/* Here’s the syntax of the animation sub-properties. */
.element {
  animation-name: name;
  animation-duration: duration;
  animation-timing-function: timing-function;
  animation-delay: delay;
  animation-iteration-count: count;
  animation-direction: direction;
  animation-fill-mode: fill-mode;
  animation-play-state: play-state;
}

复制代码

同样，当你把代码应用到元素上时，它就会渲染出一个动画的方形。

参见CodePen上Didicodes (@edyasikpo) 的
 Pen
Animation sub-properties – CSS Animation Tutorial。

请注意，你不能把animation 速记属性和animation 子属性放在一起使用，因为它们产生的是同样的东西。它们应该根据你想实现的目标单独使用。

你可以在MDN网络文档中了解更多关于每个子属性及其价值。

当你进入关键帧时，你必须知道，如果没有关键帧来显示动画的顺序，使用样式来描述CSS动画是不可行的。

例如，下面的演示包括animation-name,animation-duration, 和animation-timing-function 三个子属性，这些子属性应该能产生心跳。

然而，你不能在心脏上看到任何动画，因为@keyframes at-rule属性还没有配置好。

请看CodePen上Didicodes (@edyasikpo) 的
 PenA heart – CSS Animations Tutorial 。

使用`@keyframe` 来表示一个动画序列

关键帧描述了一个动画元素在动画序列中某个特定时间的渲染情况。由于动画的时间是在CSS样式中使用animation 速记属性或其子属性定义的，关键帧使用百分比来表示动画序列。

要使用关键帧，创建一个@keyframes at-rule，其名称与传递给animation-name 属性的名称相同。在心跳演示中，animation-name 是heartbeat ，所以你必须把@keyframes at-rule 也命名为heartbeat 。

每个@keyframes at-rule包含一个关键帧选择器的样式列表，指定关键帧发生时动画的百分比，以及一个包含该关键帧样式的块。

@keyframes heartbeat {
  0% {
    transform: scale(1) rotate(-45deg);
  }
  20% {
    transform: scale(1.25) rotate(-45deg);
  }
  40% {
    transform: scale(1.5) rotate(-45deg);
  }
}

复制代码

0% 表示动画序列的第一时刻，而100% 表示动画的最终状态。

现在你理解了@keyframes ，让我们把它包含在心脏演示中，看看是否有什么变化。

请看CodePen上Didicodes (@edyasikpo) 的 Pen
Heartbeat – CSS动画教程
。

正如你所看到的，心脏现在已经在跳动了!

当你添加了一个CSS@keyframes at-rule，使心脏的大小从0% 到40% ，你设置。