一个一个地改变div不透明度来制作动画

Question

我试着用四个方框来创建一个动画，每个方块都应该一个一个地改变不透明度来制作一个加载类型的动画，我试过用CSS，但无法实现，有人能帮助这个CSS动画吗？

这是工作的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 1

这是在修复您的代码之后：

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

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

演示

您可以根据您的偏好微调该值:)

Answer 2

您需要将动画调用添加到您的li元素，否则它将无法运行。

使用animation速记属性可以做到这一点。

​

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);
  animation: dance 888ms infinite alternate;
}

.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 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}

<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 3

这对我有用..。

    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;

  -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: dance 1.5s ease-out infinite;
  animation-delay: 0.91s;


}

li.block-2 {
animation: dance 1.5s ease-out infinite;
animation-delay: 1.54s;

}

li.block-3 {
animation: dance 1.5s ease-out infinite;
animation-delay: 1.77s;

}

li.block-4 {
 animation: dance 1.5s ease-out infinite; 
 animation-delay: 1.99s;

}

@keyframes dance {
    50%{
        opacity: 0;
    }
}