用 CSS3 画加载动画
本文将详细介绍如何用 CSS3 画出如下的加载动画。
（1）
（2）
一、CSS3 简介
CSS3 是 CSS2 的升级版本，3 只是版本号，它在 CSS2.1 的基础上增加了很多强大的新功能。 目前主流浏览器 chrome、safari、firefox、opera、甚至 360 都已经支持了 CSS3 大部分功能了，IE10 以后也开始全面支持 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。
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 的要求比较高（实现渐变圆形边框，而且边框的起点要求是圆弧型），动画方面跟上一个例子差不多。
四、其他
逐帧动画——复杂的动画效果，可以用逐帧动画完成。参考 demo。