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

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% 之间的大约一半持续时间就像 ease, ease-in, ease-out 它会在中间点之前或之后一点，但逻辑是一样的)。

演示作为上述观点的证明:

在下面的代码片段中，我将 animation-timing-function 设置为 linear 并插入了帧以更改 background-color在 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>

---

解决方案:

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

演示:(删除了所有带有供应商前缀的版本以保持代码片段较小)

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>