一文看懂CSS3动画

文将使用CSS3动画keyframes创建一个页面加载器，加载时带着三个黄色圆点破浪形移动。它将向您展示如何为加载页面设计HTML样式，创建动画的keyframes，并使用keyframes的动画延迟。

以下是你将在本教程结束时制作的内容。

图中的三个黄色圆点，在页面加载过程中，呈现波浪形的跳动。

首先，先创建一个基本的html文件：

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

<div class="loader">

<span></span>

</div>

文中添加了一个名为loader类的div。这个div负责创建所有页面加载器元素。在这个div中，添加了三个连续的span元素，每个元素表示一个页面加载器圆点。

第二步为页面定义基本的CSS：

/*_ OPTIONAL: Styles for the demo. *_/

body {

background: #2C294F;

padding: 2rem;

}

p {

font: 1rem/1.45 "Operator Mono";

color: #A599E9;

text-align: center;

}

这个代码块定义了p标记和主体的可选CSS样式。背景颜色，字体大小等属性可以根据自己的爱好更改。不过这些都不是动画所必须的样式，只是为了方便呈现动画效果。

关键的定义是下面的.loader样式：

/_ CSS for animated bouncing loader. _/

.loader {

display: flex;

justify-content: center;

align-items: center;

}

这里我们使用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;

}

默认情况下，页面加载器的形状是方形的。我们要给它一个圆形形状，可以将边界半径设置为50%。.loader > span:nth-child(n)是指loader父元素下的第n个子元素。animation-delay是动画延迟时间。

这里最有趣的部分是animation属性。我们使用了一个名为bouncingLoader的动画keyframes，它每0.6s运行一次，并且无限重复。

定义动画的keyframes。keyframes用于定义动画行为，并让我们完全控制CSS动画的一个周期。我们将它定义为@keyframes，后面跟着动画的名字，在本例中是bouncingLoader。

在@keyframe规则中，使用from和to两个关键字来指定动画的起始点和结束点。同样地，你也可以用0%表示起点，用100%表示动画的终点。

此外，如果您想要多个动画转换，您可以定义一个百分比范围，每个百分比包含一个样式选择器列表。这些百分比可以以任何顺序列出。这些百分比的简单表示如下所示：

/_ 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);

}

这使用了from和to关键字，它们定义了圆点的宽度、高度和不透明度等基本样式属性。Loader中每个圆圈的宽和高从0.1rem到width:1rem;和height:1rem; 除此之外，为了创建弹跳效果，使用CSS transform属性更改给定元素的坐标，从而转换每个圆点的位置。

使用这个transform属性，采用了translate3D()函数，它接受三个输入来解释(x, y, z)坐标的变化。因为我们希望我们的装载机在波动运动中运行，我们需要主要沿着y轴平移，保持x轴和z轴不变。因此，结束点的值为(0，-1rem, 0)。

最后一部分。既然已经为@keyframe编写了代码，现在就该设置并运行它了。动画的运行是通过以下几行代码实现的（上面已显示过一次）:

/_ 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;

}

使用animation属性和/或它的子属性对想要动画的元素进行样式设置。使用此属性可以控制动画的时间、持续时间和其他细节。

这里你已经使用了以下动画的子属性:

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

animation-name: 定义你的动画的名字，在我的例子中是加载器。

animation-duration: 配置动画完成一个循环的时间长度。

animation-iteration-count: 表示你希望动画循环在停止前播放多少次。

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

除了这些，还有其他几个子属性。你可以在Mozilla Web文档中获得详细信息。

基于这些，本文的动画定义如下:

animation: bouncingLoader 0.6s infinite alternate;

这行代码做了以下三件事:

告诉loader元素使用keyframes bouncingLoader。

设置动画的长度为0.6秒。

无限次地运行动画。在完成一个循环后，动画的方向就会发生变化，也就是反转。

你已经为弹跳加载器的第一个圆点定义了这些属性。为了瞄准第二个(2)和第三个(3)圆点，你使用了第n个子(n)选择器，它允许你选择和瞄准一个或多个元素，它们是父元素的第n个子元素。此外，对于其余的span元素，您刚刚定义了动画延迟，因此每个元素不会同时开始动画，而是延迟了定义时间后才开始，结果就是破浪形状。

前，图片产业可能是一个快速成长的行业。具有创造性的新网站如雨后春笋般，每天都会涌现出来，而 HTML 与 CSS 也存在于每一个控制指令中。

CSS 在电子结构化内容建设的道路上，还有很长的路要走。它被用以管控文件布局的绝对精准度，并以媒体类型来进行对比布局。当今的网站提供给了用户多种类型的交互方式，而 CSS3 呈现的效果也被广泛的应用在其中。

搜寻免费的代码片段并不困难，但是需找遵循正确设计方向的设计视图，却很耗费时间。今天分享的这份清单将有助于你提升知识，同时也能提升用户访问网站的体验度。

===============================

1.Modern Google Loader

2.CSS Rainbow Loader

3.Single element Slack loader

4.CSS Cog loader

5.VSCO – CSS loader

6.Cube CSS Loader

7.Pure CSS3 loader

8.CSS Loader

9.CSS3 Loaders

10.CSS loaders kit

11.Tumblr-style cog loaders

12.Logo Loader

13.CSS Water filling Loader

14.CSS loader

15.CSS Weather Loader

16.Chrome Cast CSS Loader

17.Simple Loader

18.Random Loader

19.CSS loader

20.Android 4.4 Kitkat loader

21.CSS creative loading

22.Simple CSS loader

23.CSS Loading Animation

24.Loaders collection by Loaders.css

25.Animated CSS3 Loading Bar

26.CSS Loading animation

27.Pushing pixels CSS loader

28.Page Loading Effects

29.CSS Loader

30.2D and 3D Block Loaders

31.CSS loading text animation

32.Single element CSS spinners

33.Pace.js – Page Load Progress Bars

34.SpinKit – CSS loaders

35.Loading SVG loaders

36.12 free SVG loaders

37.Material Design preloader

结论

如果你拥有自己的网站或博客，并希望找到一些好看的加载和预载设计的话，那么上面提到的免费 HTML5，CSS3 预载动画将会以最有效的方式助你实现目标。

注：

由于头条不支持站外链接跳转，请手动复制地址：http://t.cn/RtbmtMg 在浏览器打开体验。

英文原文：Free HTML5 And CSS3 Loaders and Preloaders
译者：IT程序狮
译文源自：http://t.cn/RtbmtMg
原创翻译，版权归原作者所有，转载请标明出处，谢谢合作。

以往，想在HTML上实现动画效果，要不就用被乔布斯恨死的了Flash 动画，要不就用网页动画图像或者JavaScript 实现效果。在CSS3之后，就可以用CSS在HTML上实现动画了。

要创建 CSS3 动画，你需要了解 @keyframes 规则。现在 @keyframes 创建动画时，需将其绑定到一个选择器，否则动画不会有任何效果。

13.1 原生创建动画

用CSS3原生代码创建动画，语法是@keyframes animationname {keyframes-selector {css-styles;}}，其中animationname ：必需，动画的名称；

keyframes-selector：必需，动画时长的百分比合法的值：0-100%， from（与 0% 相同），to（与 100% 相同）
css-styles：必需，一个或多个合法的 CSS 样式属性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动起来</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: myfirst 5s;
            -webkit-animation: firstan 5s; /* Safari and Chrome */
        }

        @keyframes firstan {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }

        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }
    </style>
</head>
<body>
<div/>
</body>
</html>

输出结果

13.2 动画库创建

如果每次都要自己手动用CSS去创建动画，那效果太低了。为此，有人专门专门开发了CSS动画库animation.css。可以在线https://animate.stylek看效果，它里面的动画效果，可以满足大多数需求了。下载https://github.com/animate-css/animate.css里的animate.min.css文件，放到HTML文件相同目录下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用动画库实现动画</title>
    <link rel="stylesheet" type="text/css" href="animate.min.css"/>
</head>
<body>
<main class="animate__animated animate__fadeInLeft">
    老陈说编程，动画效果行
</main>
</body>
</html>

输出结果

好了，有关CSS动画效果的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML5##CSS##程序员##Web#

在线咨询

上一篇：实测，利用js工具wordexport将页面导出为W
下一篇：nginx+php如何执行请求？工作原理介绍

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

一文看懂CSS3动画

13.1 原生创建动画

13.2 动画库创建

您的项目需求