动画不运行

Question

我正在尝试使用CSS动画制作一个加载屏幕。屏幕是四个不同的条收缩和增长。我想把它们排列成正方形。我使用绝对定位来定位它们，但我想知道是否有更好的方法。我设法做了3条显示和浮动，但没有设法做最后一个。

现在，动画根本没有运行。有人能帮我吗？

代码：https://codepen.io/ngmh/pen/gxewJK

HTML：

<div id="top"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="left"></div>

CSS：

#top{
  background-color: red;
  width: 100px;
  height: 25px;
  border-radius: 12.5px;
  position: absolute;
  left: 37.5px;
  animation-name: loading-1;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
#bottom{
  background-color: yellow;
  width: 100px;
  height: 25px;
  border-radius: 12.5px;
  position: absolute;
  top: 112.5px;
  animation-name: loading-1;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
#left{
  background-color: blue;
  width: 25px;
  height: 100px;
  border-radius: 12.5px;
  animation-name: loading-2;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
#right{
  background-color: green;
  width: 25px;
  height: 100px;
  border-radius: 12.5px;
  position: absolute;
  left: 112.5px;
  top: 37.5px;
  animation-name: loading-2;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes loading-1{
  0%:{width: 100px;}
  50%:{width: 10px;}
  100%:{width: 100px;}
}
@keyframes loading-2{
  0%:{height: 100px;}
  50%:{height: 10px;}
  100%:{height: 100px;}
}

Answer 1

在您的:规则中签名百分比%之后，不应该有任何冒号%

​

#top{
  background-color: red;
  width: 100px;
  height: 25px;
  border-radius: 12.5px;
  position: absolute;
  left: 37.5px;
  animation-name: loading-1;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
#bottom{
  background-color: yellow;
  width: 100px;
  height: 25px;
  border-radius: 12.5px;
  position: absolute;
  top: 112.5px;
  animation-name: loading-1;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
#left{
  background-color: blue;
  width: 25px;
  height: 100px;
  border-radius: 12.5px;
  animation-name: loading-2;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
#right{
  background-color: green;
  width: 25px;
  height: 100px;
  border-radius: 12.5px;
  position: absolute;
  left: 112.5px;
  top: 37.5px;
  animation-name: loading-2;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes loading-1{
  0% {width: 100px;}
  50% {width: 10px;}
  100% {width: 100px;}
}
@keyframes loading-2{
  0% {height: 100px;}
  50% {height: 10px;}
  100% {height: 100px;}
}

<div id="top"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="left"></div>

​

使用伪元素将使标记更小，并且可能更易于维护。

outer不使用绝对定位，它将更好地与其他内容一起流动。

​

.outer {
  position: relative;
}
.outer div,
.outer::before,
.outer::after,
.outer div::before,
.outer div::after {
  content: '';
  position: absolute;
  border-radius: 12.5px;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.outer::before {
  background-color: red;
  width: 100px;
  height: 25px;
  left: 37.5px;
  animation-name: loading-1;
}
.outer::after{
  background-color: yellow;
  width: 100px;
  height: 25px;
  top: 112.5px;
  animation-name: loading-1;
}
.outer div::before{
  background-color: blue;
  width: 25px;
  height: 100px;
  animation-name: loading-2;
}
.outer div::after{
  background-color: green;
  width: 25px;
  height: 100px;
  left: 112.5px;
  top: 37.5px;
  animation-name: loading-2;
}
@keyframes loading-1{
  0% {width: 100px;}
  50% {width: 10px;}
  100% {width: 100px;}
}
@keyframes loading-2{
  0% {height: 100px;}
  50% {height: 10px;}
  100% {height: 100px;}
}

<div class="outer"><div></div></div>

​