css3字体弹跳动画_如何使用CSS3动画创建弹跳页面加载器

css3字体弹跳动画

介绍 (Introduction)

In this tutorial, you will create a bouncing page loader using CSS3 animation keyframes. It will show you how to style HTML for a loading page, create animation keyframes, and use animation delay with keyframes.

在本教程中，您将使用CSS3动画关键帧创建一个弹跳页面加载器。 它将向您展示如何为加载页面设置HTML样式，创建动画关键帧以及将动画延迟与关键帧一起使用。

Here’s what you’ll be making by the end of this tutorial:

在本教程结束时，您将要执行以下操作：

Or click use the following CodePen link to see a working example:

或单击使用以下CodePen链接以查看工作示例：

https://codepen.io/MaedahBatool/pen/wZxMjZ?editors=1100

https://codepen.io/MaedahBatool/pen/wZxMjZ?editors=1100

第1步-编写HTML (Step 1 — Writing the HTML)

First, let’s write the basic HTML for this project.

首先，让我们为该项目编写基本HTML。

<p>A simple representation of an animated bouncing loader!</p>

<div class="loader">
  <span></span>
  <span></span>
  <span></span>
</div>

You added a div with the class called loader. This div is responsible for creating all the page loader elements. Inside this div, you added three consecutive span elements each representing a page loader circle.

您添加了一个名为loader的class的div 。 该div负责创建所有页面加载器元素。 在此div ，您添加了三个连续的span元素，每个元素代表一个页面加载器圈子。

第2步-编写CSS样式 (Step 2 — Writing CSS Styles)

Let’s next style our basic elements.

接下来让我们设计基本元素。

/*_ OPTIONAL: Styles for the demo. *_/
body {
  background: #2C294F;
  padding: 2rem;
}

p {
  font: 1rem/1.45 "Operator Mono";
  color: #A599E9;
  text-align: center;
}

This code block defines the optional CSS styles for the p tag and the body.

此代码块为p标签和body定义了可选CSS样式。

设置.loader类的样式 (Styling the .loader Class)

Next, style your page loader with the following properties:

接下来，使用以下属性设置页面加载器的样式：

/_ CSS for animated bouncing loader. _/
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
}

Here we use the Flexbox, i.e., display: flex; property to place the bouncing page loader in the middle of the page both horizontally and vertically.

这里我们使用Flexbox ，即display: flex; 属性，将弹跳页面加载程序水平和垂直放置在页面中间。

/_ Loader circles _/
.loader > span {
  background: #FAD000;
  border-radius: 50%;
  margin: 5rem 0.5rem;
  animation: bouncingLoader 0.6s infinite alternate;
}

.loader > span:nth-child(2) {
  animation-delay: 0.2s;
}

.loader > span:nth-child(3) {
  animation-delay: 0.4s;
}

Each loader circle has width: 1rem; and height:1rem; with #FFB651 color. By default, the shape of the page loader is square. To give it a circular shape, you set the border-radius to 50%. The following GIF shows how the loader looks like without the border-radius property. You also added bit of a margin between the circles.

每个装载机圈的width: 1rem; height:1rem; #FFB651颜色。 默认情况下，页面加载器的形状为正方形。 要使其具有圆形，请将border-radius设置为50％。 以下GIF显示了没有border-radius属性的加载器的外观。 您还在圆之间添加了一点边距。

The following shows what the style would look like without setting border-radius.

下面显示了不设置border-radius样式的外观。

The most interesting part here is the animation property. We are using an animation keyframe called bouncingLoader that runs once in 0.6s and repeats itself infinitely. Let’s talk more on that and the animation delay properties in a later section.

这里最有趣的部分是animation属性。 我们正在使用一个称为bouncingLoader的动画关键帧，该关键帧每0.6秒运行一次并无限重复。 让我们在后面的部分中进一步讨论它以及动画延迟属性。

第3步-创建动画关键帧 (Step 3 — Creating Animation Keyframe)

Keyframes are used to define the animation behavior and give us complete control of one cycle of a CSS animation. We define it as a @keyframes at-rule followed by the name of the animation, which is bouncingLoader in this case.

关键帧用于定义动画行为，并让我们完全控制CSS动画的一个周期。 我们将其定义为@keyframes规则，后跟动画的名称，在这种情况下为bouncingLoader 。

Inside a @keyframe rule, you use the keywords from and to in order to specify a starting and ending point for your animation. Equivalently, you can also use 0% for from which depicts the starting point and 100% for to depicting the ending point of your animation.

在@keyframe规则中，您可以使用from和to关键字来指定动画的起点和终点 。 同样地，你也可以使用0%的from描绘的出发点和100%的to描绘动画的终点 。

Moreover, if you want several animation transitions, you can define a range of percentages each containing a list of styling selectors. These percentages can be listed in any order and with any difference between them. A simple representation of these percentages is shown below:

此外，如果要进行多个动画过渡，则可以定义一个百分比范围，每个百分比都包含样式选择器列表。 这些百分比可以以任何顺序列出，并且它们之间可以有任何差异。 这些百分比的简单表示如下所示：

@keyframes animationNameHere {
  0% { opacity: 1; }
  30% { opacity: 0.75; }
  50% { opacity: 0.5; }
  100% { opacity: 0.25; }
}

Let’s now write the code for the keyframe to create the bouncing page loader:

现在，让我们编写关键帧的代码以创建弹跳页面加载器：

/_ Define the animation called bouncingLoader. _/
@keyframes bouncingLoader {
  from {
    width: 0.1rem;
    height: 0.1rem;
    opacity: 1;
    transform: translate3d(0);
  }
  to {
    width: 1rem;
    height: 1rem;
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}

This uses the keywords from and to, which define the basic styling properties of width, height, and opacity of the circles. Other than that, to create the bouncing effect, you used the CSS transform property to change the coordinates of a given element, hence transforming the location of each circle.

这使用关键字from和to ，它们定义了圆形的width ， height和opacity的基本样式属性。 除此之外，要创建弹跳效果，您可以使用CSS transform属性更改给定元素的坐标，从而变换每个圆的位置。

With this transform property, you’ve used the translate3D() function which takes three inputs explaining the change in (x, y, z) coordinates. Since we wanted our loader to run in a wave motion, we need to translate primarily along the y-axis keeping the x and z-axis constant. Thus, the ending point value is (0, -1rem, 0).

通过此transform属性，您使用了translate3D()函数，该函数接受三个 输入来解释(x, y, z)坐标的变化。 由于我们希望装载机以波动运行，因此我们需要主要沿y 轴平移，同时保持x 轴 和z 轴恒定 。 因此， 终点值为(0, -1rem, 0) 。

Let’s show a demo of how to play with this property. If you set your ending point value as transform: translate3d(1rem, 0rem, 1rem);, it’ll mean that you are transforming it along the x and z-axis while keeping your y-axis constant. Now your animation will look something like this:

让我们演示如何使用此属性的演示。 如果将终点值设置为transform: translate3d(1rem, 0rem, 1rem); ，这意味着您将沿x和z轴进行变换，同时保持y轴不变。 现在，您的动画将如下所示：

在关键帧上使用动画延迟 (Using Animation Delay with Keyframe)

Now begins the final part. Since you have written the code for your @keyframe, it’s time to set it up and running. The kind of animation that you are viewing in the previous GIFs was made possible with the following few lines of code:

现在开始最后一部分。 由于您已经为@keyframe编写了代码，是时候设置并运行它了。 通过以下几行代码，您可以在以前的GIF中查看这种动画：

/_ Loader circles _/
.loader > span {
  background: #FAD000;
  border-radius: 50%;
  margin: 5rem 0.5rem;
  animation: bouncingLoader 0.6s infinite alternate;
}

.loader > span:nth-child(2) {
  animation-delay: 0.2s;
}

.loader > span:nth-child(3) {
  animation-delay: 0.4s;
}

You style the element you want to animate with the animation property and/or its sub-properties. Using this property you can control the timing, duration, and other details of your animation.

您可以使用animation属性和/或其子属性为要设置动画的元素设置样式。 使用此属性，您可以控制动画的timing ， duration和其他细节。

Here you have used the following animation sub-properties:

在这里，您使用了以下动画子属性：

animation: animation-name, animation-duration, animation-iteration-count, animation-direction;

• animation-name: Defines the name of your animation which is loader in my case.

  animation-name ：定义animation-name的名称 ，在我的情况下为loader 。

• animation-duration: Configures the length of time which your animation will take to complete one cycle.

  animation-duration ：配置动画完成一个周期所需的时间。

• animation-iteration-count: Tells how many times you want your animation cycle to play before it stops.

  animation-iteration-count ：告诉您希望动画循环播放多少次才能停止。

• animation-direction: Defines which direction your animation is going to play.

  animation-direction ：定义动画播放的方向。

Apart from these, there are several other sub-properties as well. You can browse through them in the Mozilla Web Docs.

除此之外，还有其他几个子属性。 您可以在Mozilla Web Docs中浏览它们。

Based on these, you have defined my animation as follows:

基于这些，您对动画的定义如下：

animation: bouncingLoader 0.6s infinite alternate;

This line of code does the following three things:

此行代码执行以下三件事：

• Tells the loader element to use our keyframe bouncingLoader.

  告诉loader元素使用我们的关键帧bouncingLoader 。

• Sets the length of the animation to 0.6 seconds.

  将动画的长度设置为0.6秒。

• Runs the animation an infinite number of times.

  无限次运行动画。

• Upon completion of one single cycle, the animation direction alternates i.e., it reverses.

  在完成一个单一周期后，动画方向会alternates即反转。

You have defined these properties for the first circle of your bouncing loader. To target the second (2) and the third (3) circle, you’ve used the nth-child(n) selector, which allows you to select and target one or more elements which are the nth-child of its parent. Moreover, for the remaining span elements, you have just defined the animation-delay, so that each element does not start to animate at the same time.

您已经为弹跳加载程序的第一个圆定义了这些属性。 要定位第二个 (2)和第三个 (3)圆，您使用了nth-child(n)选择器，该选择器允许您选择和定位作为其父级的nth-child的一个或多个元素。 此外，对于其余的span元素，您刚刚定义了animation-delay ，因此每个元素不会同时开始进行动画处理。

最终产品 (The Final Product)

Here’s the complete code of this animated bouncing page loader:

这是此动画弹跳页面加载器的完整代码：

HTML代码 (HTML Code)

<!-- HTML for Bouncing Page Loader -->
<p>A simple representation of an animated bouncing page loader!</p>

<div class="loader">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS代码 (CSS Code)

/_ CSS for animated bouncing loader. _/
.loader {
  display: flex;
  justify-content: center;
    align-items: center;
}

/_ Loader circles _/
.loader > span {
  background: #FAD000;
  border-radius: 50%;
  margin: 5rem 0.5rem;
  animation: bouncingLoader 0.6s infinite alternate;
}

.loader > span:nth-child(2) {
  animation-delay: 0.2s;
}

.loader > span:nth-child(3) {
  animation-delay: 0.4s;
}

/_ Define the animation called bouncingLoader. _/
@keyframes bouncingLoader {
  from {
    width: 0.1rem;
    height: 0.1rem;
    opacity: 1;
    transform: translate3d(0);
  }
  to {
    width: 1rem;
    height: 1rem;
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}

/_ OPTIONAL: Styles for the demo. _/
body {
  background: #2C294F;
  padding: 2rem;
}

p {
  font: 1rem/1.45 "Operator Mono";
  color: #A599E9;
  text-align: center;
}

Here’s a working demo with CodePen for this.

这是CodePen的工作演示 。

You can fork this pen and try it out for yourself.

您可以拨叉这支笔，然后自己尝试一下。

https://codepen.io/MaedahBatool/pen/wZxMjZ?editors=1100

https://codepen.io/MaedahBatool/pen/wZxMjZ?editors=1100

轮到你 (Your turn)

After developing this animation, CSS is shown to be amazingly powerful. There are several ways of creating animations like this. We’d love you hear your suggestions and the way you create CSS animations.

开发了此动画之后，CSS表现出了惊人的强大功能。 有几种创建动画的方法。 我们希望您能听到您的建议以及创建CSS动画的方式。

Thanks for reading! If this tutorial was helpful and has piqued your interest, try it out yourself and share your feedback in the comments section below.

谢谢阅读！ 如果本教程对您有所帮助，并且引起了您的兴趣，请尝试一下并在下面的评论部分中分享您的反馈。

翻译自: https://www.digitalocean.com/community/tutorials/how-to-create-a-bouncing-page-loader-with-css3-animations

css3字体弹跳动画