Principle of writing multiple objects css3 loop animation case_html/css_WEB-ITnose

When writing h5 pages, we may often encounter the need to write a lot of css3 animations. Have any students encountered the same animation effect of multiple objects, and the cycle saves in the same pace? I often encounter this , I never knew the principle before, I just simply migrated and modified it, but when I encountered something a little more complicated, I couldn't hold on, so I had to bite the bullet and analyze the principle. So next, let’s take a look at the case first, and then understand the principles

css3 animation loop case

Case 1: loading animation effect

html code:

<div class="spinner">  <div class="rect1"></div>  <div class="rect2"></div>  <div class="rect3"></div>  <div class="rect4"></div>  <div class="rect5"></div></div>

css style:

<style>    .spinner {  margin: 100px;  width: 50px;  height: 60px;  text-align: center;  font-size: 10px;} .spinner > div {  background-color: #67CF22;  height: 100%;  width: 6px;  display: inline-block;     -webkit-animation: stretchdelay 1.2s infinite ease-in-out;  animation: stretchdelay 1.2s infinite ease-in-out;} .spinner .rect2 {  -webkit-animation-delay: -1.1s;  animation-delay: -1.1s;} .spinner .rect3 {  -webkit-animation-delay: -1.0s;  animation-delay: -1.0s;} .spinner .rect4 {  -webkit-animation-delay: -0.9s;  animation-delay: -0.9s;} .spinner .rect5 {  -webkit-animation-delay: -0.8s;  animation-delay: -0.8s;} @-webkit-keyframes stretchdelay {  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }    20% { -webkit-transform: scaleY(1.0) }} @keyframes stretchdelay {  0%, 40%, 100% {     transform: scaleY(0.4);    -webkit-transform: scaleY(0.4);  }  20% {     transform: scaleY(1.0);    -webkit-transform: scaleY(1.0);  }}</style>

Case 2: loading effect of circular enlargement or reduction

html code:

<div class="spinner">  <div class="double-bounce1"></div>  <div class="double-bounce2"></div></div>

css style:

.spinner {  width: 60px;  height: 60px;   position: relative;  margin: 100px;} .double-bounce1, .double-bounce2 {  width: 100%;  height: 100%;  border-radius: 50%;  background-color: #67CF22;  opacity: 0.6;  position: absolute;  top: 0;  left: 0;     -webkit-animation: bounce 2.0s infinite ease-in-out;  animation: bounce 2.0s infinite ease-in-out;} .double-bounce2 {  -webkit-animation-delay: -1.0s;  animation-delay: -1.0s;} @-webkit-keyframes bounce {  0%, 100% { -webkit-transform: scale(0.0) }  50% { -webkit-transform: scale(1.0) }} @keyframes bounce {  0%, 100% {     transform: scale(0.0);    -webkit-transform: scale(0.0);  } 50% {     transform: scale(1.0);    -webkit-transform: scale(1.0);  }}

　

After reading the above two cases, we know what loop animation of multiple objects is. We can also know that through animation-delay, we can make multiple objects maintain consistent motion effects, but after looking at animation and delay But I still don’t know how to set it up. Maybe you can imagine the frame in which the object is running. Indeed, I thought so when I analyzed it.

css3 animation loop principle

To explain this clearly, we must first know a few probabilities (parameters), the animation duration t1, and the delay time difference of each object t2 , the number of objects n

t2 = t1/n

The average percentage of key frames is 100%/n

After understanding the above points clearly , in fact, we should know how to write multiple object loops. For example:

html code:

      <ul>          <li class="on1"></li>          <li class="on2"></li>          <li class="on3"></li>          <li class="on4"></li>          <li class="on5"></li>          <li class="on6"></li>      </ul>

css code:

        ul{list-style:none;padding:0;margin:0;}        ul>li{            width:50px;            height:50px;            margin-bottom:20px;            background:orange;            -webkit-animation:scale 3s linear infinite;        }        .on2{            -webkit-animation-delay:0.5s;        }        .on3{            -webkit-animation-delay:1s;        }        .on4{            -webkit-animation-delay:1.5s;        }        .on5{            -webkit-animation-delay:2s;        }        .on6{            -webkit-animation-delay:2.5s;        }        @-webkit-keyframes scale{            0%,33.4%{width:50px;height:50px;}            16.7%{width:80px;height:80px;}        }

This example is actually a loop animation of 6 objects. We can control the effect of different object changes at each 100%/16 point, that is, 16.7%, 33.4%, 50.1 %, 66.8%, 83.5, 100.2% (because it is not divisible, there is an extra part, so it is approximate)

Furthermore, we want to see the elements start to move from the beginning, so we have to add this 16.7% preposition, we get

      @-webkit-keyframes scale{            0%,33.4%{width:50px;height:50px;}            16.7%{width:80px;height:80px;}        }

In the end, it may not be very clear. If you don’t understand, please give a few more examples and think about it more. ,mutual encouragement.

Leave a few better articles about CSS3 animation:

Experience sharing: three CSS techniques for multi-screen complex animation

Increase your posture ! Scientific calculation method of CSS3 animation frame number

[Original] A little experience in mobile web animation design?? CSS3 realizes running