逐个改变div不透明度以制作动画

时间：2016-10-05 11:09:51

标签： html css css3 css-animations

我试图在四个方框的帮助下创建动画，每个方块应该逐个改变不透明度以制作加载类型动画，我尝试使用CSS，但无法实现，任何人都可以帮助这个CSS动画？

这是工作JSfiddle

＆＃13;
＆＃13; 
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);
	
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：3)

这是在修复代码之后：

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

您可以根据您的偏好微调值：）

答案 1 :(得分：2)

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

使用animation速记属性可以实现此目的。

＆＃13;
＆＃13; 
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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：2)

这对我有用.. 

    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;
    }
}

答案 3 :(得分：1)

只需在动画中设置opacity: 0属性，如下所示： https://jsfiddle.net/60jnk66d/6/

答案 4 :(得分：0)

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);
      border-radius:50%;
	}
	
	.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 1s infinite;
	  animation-delay: 222ms;
	  animation-direction: alternate;
	}
	
	li.block-2 {
	  animation: dance 1s infinite;
	  animation-delay: 444ms;
	  animation-direction: alternate;
	}
	
	li.block-3 {
	  animation: dance 1s infinite;
	  animation-delay: 666ms;
	  animation-direction: alternate;
	}
	
	li.block-4 {
	  animation: dance 1s infinite;
	  animation-delay: 888ms;
	  animation-direction: alternate;
	}
	
	@keyframes dance {
	  from {
	    opacity: 1
	  }
	  to {
	    opacity: 0.1
	  }
	}
	
	@-webkit-keyframes dance {
	  from {
	    opacity: 1
	  }
	  to {
	    opacity: 0.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>
试一试

相关问题
最新问题