How to implement loading animation effect in CSS3

Today we will teach you how to use CSS3 to create a Loading animation effect. Why should we use Loadning to create animation effects? Let us give you an example. I believe that all your confusion will disappear after reading it.

The first step is to draw the static small chrysanthemum.

sk-fading-circle {
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
}
 
<div class="sk-fading-circle">
  <div class="sk-circle"></div>
  … //为缩减篇幅省略中间10个div
  <div class="sk-circle"></div>
</div>

The code is as above. The static chrysanthemum is actually 12 small divs nested in an outer div. The small div is drawn into a circle using border-radius and positioned in the center of the top grid using margin: 0 auto;. Since the 12 small divs are absolutely positioned, they all overlap.

The second step is to spread out the 12 overlapping circles.

.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}
.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}
… //节省篇幅，每个圆每隔30度递增旋转
.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}
 
<div class="sk-fading-circle">
  <div class="sk-circle1 sk-circle"></div>
  … //为缩减篇幅省略中间10个div
  <div class="sk-circle12sk-circle"></div>
</div>

The code is as above, use transform's rotate to rotate each dot to form a complete chrysanthemum shape. If you are not familiar with transform, take a look at the picture below. The second dot is rotated 30 degrees. The rotation of the other dots can be figured out by yourself:

The third step is to control the opacity attribute through animation, so that each Dots fade in and out

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
.sk-fading-circle .sk-circle:before {
  ……
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

so that each dot flashes synchronously like a traffic light.

The last step is to set the animation-delay for each point to stagger the flashing time and form the common chrysanthemum spinning effect

.sk-fading-circle .sk-circle2:before {animation-delay: -1.1s; }
.sk-fading-circle .sk-circle3:before { animation-delay: -1s; }
.sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; }
… //为缩减篇幅省略中间代码
.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }

Because there are 12 dots, each The flashing interval of the dots is 0.1s, so the first dot has no animation-delay and flashes immediately. The second dot starts flashing from -1.1s (if you don’t understand negative numbers, please refer to the animation article, which means that it starts from this time point and the previous animation effect is not displayed). After that, each dot is delayed in increments of 0.1s. Eventually, the common chrysanthemum-turning Loading effect is formed

Through this case study, I believe you have fully mastered how to use Loadning to create animation effects. For more exciting content, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to use canvas to realize the interaction between the ball and the mouse

How to use canvas to create the effect of particle fountain animation

css3 click to display ripple effects

The above is the detailed content of How to implement loading animation effect in CSS3. For more information, please follow other related articles on the PHP Chinese website!