Question

我很难弄清楚为什么我的关键帧（星球）中的图像会出现在50％关键帧之前。现在它几乎立即出现了。

如果我想要它（50％之后），我该怎么做呢？

body {
  background-color: #F5F5F5;
  color: #555;
  height: 100vh;
  width: 100%;
  font-size: 1.1em;
  font-family: 'Lato', sans-serif;
}
.star-container {
  background-color: green;
  color: white;
  width: 60%;
  height: 80%;
  margin: 10% auto;
  text-align: justify;
  position: relative;
}
.star {
  width: 250px;
  height: 250px;
  text-align: justify;
  -webkit-animation-name: star;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-name: star;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes star {
  0%, 21% {
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }
  22%,
  45% {
    background-color: red;
    position: absolute;
    left: 50%;
    top: 90%;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }
  49% {
    background-color: red;
    left: 0px;
    top: 0px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }
  50%,
  100% {
    /*shape-inside: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px );
  shape-padding: 10px;
  /*transition: all 1s ease; */
    /*-webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px );*/
    background-image: url('http://optimumwebdesigns.com/images/star.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 50px;
    width: 50px;
  }
  /* Standard syntax */
  @keyframes star {
    0%, 21% {
      background-color: red;
      position: absolute;
      left: 50%;
      top: 50%;
      height: 50px;
      width: 50px;
      border-radius: 50%;
    }
    22%,
    45% {
      background-color: red;
      position: absolute;
      left: 50%;
      top: 90%;
      height: 50px;
      width: 50px;
      border-radius: 50%;
    }
    49% {
      background-color: red;
      left: 0px;
      top: 0px;
      height: 50px;
      width: 50px;
      border-radius: 50%;
    }
    50%,
    100% {
      /*shape-inside: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px );
  shape-padding: 10px;
  /*transition: all 1s ease; */
      /*-webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px );*/
      background-image: url('http://optimumwebdesigns.com/images/star.png');
      background-repeat: no-repeat;
      background-size: 100%;
      height: 50px;
      width: 50px;
    }
  }

<div class="star-container">
  <div class="star">
  </div>
</div>

Answer 1

原因：

正如我在回复您的评论here时提到的那样，问题是因为在50%关键帧之前的任何帧中都没有指定背景图像。这意味着UA将其视为从0%到50%逐渐更改背景图像。但由于没有图像显示的中间状态，对于具有线性计时功能的动画，它在0%到50%之间的大约一半时间内出现（对于其他计时功能，如轻松，轻松，轻松） - 它会在中间点之前或之后稍微但逻辑是相同的）。

演示作为上述要点的证明：

在下面的代码段中，我已将animation-timing-function设置为linear并插入了框架，以便在background-color标记处将yellow更改为25%。当颜色变为黄色时，您会看到图像现在如何显示在同一时间。这是为了证明第一段中的陈述。

body {
  background-color: #F5F5F5;
  color: #555;
  height: 100vh;
  width: 100%;
  font-size: 1.1em;
  font-family: 'Lato', sans-serif;
}
.star-container {
  background-color: green;
  color: white;
  width: 60%;
  height: 80%;
  margin: 10% auto;
  text-align: justify;
  position: relative;
}
.star {
  width: 250px;
  height: 250px;
  text-align: justify;
  -webkit-animation-name: star;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-name: star;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
@keyframes star {
  0%, 21% {
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }
  22% {
    background-color: red;
    position: absolute;
    left: 50%;
    top: 90%;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }
  25% {
    background-color: yellow;
  }
  45% {
    background-color: yellow;
    position: absolute;
    left: 50%;
    top: 90%;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }
  49% {
    background-color: yellow;
    left: 0px;
    top: 0px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }
  50%,
  100% {
    /*shape-inside: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px );
  shape-padding: 10px;
  /*transition: all 1s ease; */
    /*-webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px );*/
    background-image: url('http://optimumwebdesigns.com/images/star.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 50px;
    width: 50px;
  }
}

<div class="star-container">
  <div class="star">
  </div>
</div>

解决方案：

此问题的解决方法是在background-image标记之前的所有帧中将none设置为50%。

演示（已删除所有以供应商为前缀的版本以使代码段变小）

body {
  background-color: #F5F5F5;
  color: #555;
  height: 100vh;
  width: 100%;
  font-size: 1.1em;
  font-family: 'Lato', sans-serif;
}
.star-container {
  background-color: green;
  color: white;
  width: 60%;
  height: 80%;
  margin: 10% auto;
  text-align: justify;
  position: relative;
}
.star {
  width: 250px;
  height: 250px;
  text-align: justify;
  animation-name: star;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes star {
  0%, 21% {
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-image: none;
  }
  22%, 45% {
    background-color: red;
    position: absolute;
    left: 50%;
    top: 90%;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-image: none;
  }
  49% {
    background-color: red;
    left: 0px;
    top: 0px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-image: none;
  }
  50%,
  100% {
    background-image: url('http://optimumwebdesigns.com/images/star.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 50px;
    width: 50px;
  }
}

<div class="star-container">
  <div class="star">
  </div>
</div>

Answer 2

将def finalResult(a, b) { if (a <= b) { (a / b) * 100 } else { ((b - a) / a) * 100 } }添加到def result = finalResult(valuePA, valueCA)，这将在2s后准确显示图片。

应该在它之前出现的CSS关键帧图像

2 个答案:

原因：

解决方案：