弹跳加载动画特效Bouncing loader

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

HTML

<div class="bouncing-loader">
   <div></div>
   <div></div>
   <div></div>
</div>

CSS

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}
.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;
}

demo显示

说明

注意：1rem通常是16px。

1. @keyframes定义具有两种状态的动画，其中元素更改opacity并使用transform: translateY()在2D平面上向上转换transform: translate3d()。使用单轴平移transform: translate3d()可以提高动画的性能。

2. .bouncing-loader是弹跳圆圈和用途的父容器display: flex和justify-content: center将它们中的中心位置。

3. .bouncing-loader > div，将父级的三个子元素们div作为样式。子元素们div给定的宽度和高度为1rem，用border-radius: 50%;将它们从正方形变成圆形。

4. margin: 3rem 0.2rem指定每个圆形具有上/下外边距是3rem和左/右外边距是0.2rem，以便它们不会直接相互接触，使子元素们保持一定的空间。

5. animation是对于各种动画属性的缩写属性：animation-name，animation-duration，animation-iteration-count，animation-direction被使用。

6. nth-child(n) 将元素作为其父元素的第n个子元素。

7. animation-delaydiv分别用于第二个和第三个div，因此每个元素不会同时启动动画。

原文链接:：来源Github