Creates a bouncing loader animation.
@keyframes defines an animation that has two states, where the element changes
opacity and is translated up on the 2D plane using
transform: translate3d(). Using a single axis translation on
transform: translate3d() improves the performance of the animation.
.bouncing-loader is the parent container of the bouncing circles and uses
display: flex and
justify-content: center to position them in the center.
.bouncing-loader > div, targets the three child
divs of the parent to be styled. The
divs are given a width and height of
border-radius: 50% to turn them from squares to circles.
margin: 3rem 0.2rem specifies that each circle has a top/bottom margin of
3rem and left/right margin of
0.2rem so that they do not directly touch each other, giving them some breathing room.
animation is a shorthand property for the various animation properties:
animation-direction are used.
nth-child(n) targets the element which is the nth child of its parent.
animation-delay is used on the second and third
div respectively, so that each element does not start the animation at the same time.
- Note that
1rem is usually
继续阅读 30秒学会 CSS 片段 – Bouncing loader