今天给大家分享一款非常常用的css 加载动画，这款CSS3 Loading动画主要由几个小球通过规律的上下跳动，渐隐渐显而成，效果十分生动、流畅。兼容IE8以上，尤其适合在移动端中使用，基本代替了图片实现加载的效果。

反弹加载动画效果如下：

代码的实现：

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
	@keyframes bouncing-loader {
	  from {
	    opacity: 1;
	    transform: translateY(0);
	  }
	  to {
	    opacity: 0.1;
	    transform: translateY(-1rem);
	  }
	}
	.bouncing-loader {
	  display: flex;
	  justify-content: center;
	}
	.bouncing-loader > div {
	  width: 1rem;
	  height: 1rem;
	  margin: 3rem 0.2rem;
	  background: #8385aa;
	  border-radius: 50%;
	  animation: bouncing-loader 0.6s infinite alternate;
	}
	.bouncing-loader > div:nth-child(2) {
	  animation-delay: 0.2s;
	}
	.bouncing-loader > div:nth-child(3) {
	  animation-delay: 0.4s;
	}
</style>

说明：

注:1rem 通常是16px 。 
@keyframes定义了一个具有两种状态的动画，其中元素更改opacity并使用transform: translateY()在2D平面上进行transform: translateY() 。
.bouncing-loader是弹跳圆圈的父容器，使用display: flex和justify-content: center将它们放置在中心位置。  
.bouncing-loader > div ，将父级的三个子div作为样式。 div的宽度和高度为1rem ，使用border-radius: 50%将它们从正方形变成圆形。 
margin: 3rem 0.2rem 指定每个圆的上边距/下边距为3rem 和左/右边距0.2rem 以便它们不直接接触对方，给它们一些呼吸空间。 
animation是各种动画属性的缩写属性：使用animation-name ， animation-duration ， animation-iteration-count ， animation-direction 。 nth-child(n)目标是其父元素的第n个子元素。 
animation-delay分别用于第二个和第三个div ，以便每个元素不会同时启动动画。 

来自：30 seconds of css

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/1203