Sanjeev K Sanjeev K - 2 months ago 7
CSS Question

Changing div opacity one by one to make animation

I am trying to create a animation with the help of four boxes, each of the square should change opacity one by one to make a loading type animation, I tried with CSS, but not able to achieve, can anyone help with this

CSS
animation?

Here is the working JSfiddle



body, html {
width: 100%;
height: 100%;
}
body {
background-color: #efefef;
}
.wrapper {
height: 40px;
width: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -22.5px;
margin-left: -22.5px;
}
ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 80px;
height: 80px;
position: relative;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
ul li {
width: 2em;
height: 2em;
position: absolute;

/*animation: dance 888ms infinite alternate;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);*/
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.block-1 {
top: 0;
left: 0;
background:#0076aa;
}
.block-2 {
top: 0;
right: 0;
background:#98bd81;
}
.block-3 {
bottom: 0;
right: 0;
background:#98bd81;
}
.block-4 {
bottom: 0;
left: 0;
background:#0076aa;
}
li.block-1 {
animation-delay: 222ms;
}
li.block-2 {
animation-delay: 444ms;
}
li.block-3 {
animation-delay: 666ms;
}
li.block-4 {
animation-delay: 888ms;
}
@keyframes dance {
to {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);

}
}

<div class='wrapper'>
<ul class='blocks'>
<li class='block-1'></li>
<li class='block-2'></li>
<li class='block-3'></li>
<li class='block-4'></li>
</ul>
</div>




Answer

This is after fixing your code:

@-webkit-keyframes dance {
      from {
        opacity: 1
      }
      to {
        opacity: 0.1
      }
}

li.block-1 {
      animation: dance 1s infinite;
      animation-delay: 222ms;
      animation-direction: alternate;
    }

Here is the JSFiddle demo

You can fine tune the value to your preference :)