用 CSS3 画加载动画

桩白墨
前端笔记
2018-04-25
126热度
0评论

导航

本文将详细介绍如何用 CSS3 画出如下的加载动画。

（1）

（2）

一、CSS3 简介

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。

【CSS3 浏览器支持】

CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。

CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。

【CSS3能做什么？】

二、CSS3 动画

简单来说，CSS3 动画就是用 CSS 描述几个关键帧（keyframes），然后定义一些过渡方式（animation）把关键帧串起来。

CSS3 动画实例

CSS3 动画技术的优势

原生 CSS 速度快（可以开启硬件加速）
画质好，抗锯齿

CSS3 动画入门

主要包括以下内容

浏览器支持
keyframe 规则
animation 参数详解
简单 demo

三、加载动画实现详解

1. 脉冲动画：

https://codepen.io/plough/pen/yjNaQW

1.1 html 结构

<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
  <div class="rect6"></div>
</div>

定义了几个 div。

1.2 初始 CSS

.spinner {
  margin: 100px auto;
  width: 64px;
  height: 64px;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  background-color: rgb(47,122,240);
  height: 100%;
  width: 6px;
  display: inline-block;
  border-radius: 15px;
  margin-left: 2px;
}

设置一些基本样式。此时得到排列整齐的 6 个宽为 6px，高为 64px 的圆角矩形。

1.3 定义关键帧

@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scale(0.2, 0.2) } 
20% { -webkit-transform: scale(1.0, 1.0) }
}

@keyframes stretchdelay {
0%, 40%, 100% { transform: scale(0.2, 0.2); }
20% { transform: scale(1.0, 1.0); }
}

定义了4个关键帧：

0%，初始为 0.2 倍宽高
20%，放大为原始宽高
40%，缩小为 0.2 倍宽高
100%，保持 0.2 倍宽高

1.4 绑定动画

.spinner > div {
  -webkit-animation: stretchdelay 1.8s infinite ease-in-out;
  animation: stretchdelay 1.8s infinite ease-in-out;
}

参数的意义分别是：绑定名为 stretchdelay 的动画；动画周期为 1.8s；无限循环；规定以慢速开始和结束的过渡效果（相对于匀速，（开始和结束都慢）两头慢）
此时给 6 个圆角矩形都绑定了动画。但是，矩形的动画都是同步播放的。

1.5 设置延迟

.spinner .rect2 {
  -webkit-animation-delay: -1.7s;
  animation-delay: -1.7s;
}
 
.spinner .rect3 {
  -webkit-animation-delay: -1.5s;
  animation-delay: -1.5s;
}
 
.spinner .rect4 {
  -webkit-animation-delay: -1.3s;
  animation-delay: -1.3s;
}
 
.spinner .rect5 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.spinner .rect6 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

以上代码给矩形设置不同的延迟时间。因为周期是 1.8s，所以 -1.7s 相当于 0.1s。
综上，第一个加载动画就完成了。

2. 圆环动画

https://codepen.io/plough/pen/odXzVZ

圆环动画对 CSS 的要求比较高（实现渐变圆形边框，而且边框的起点要求是圆弧型），动画方面跟上一个例子差不多。

四、其他

2016年九大前端必备动画库

逐帧动画——复杂的动画效果，可以用逐帧动画完成。参考demo。