Question

我对关键帧如何在此演示中完全正常工作感到困惑。令我困惑的是，0％和100％没有定义，但25％和75％。但在0％时，25％关键帧处于活动状态。我认为直到它达到75％的关键帧，直到动画的25％才会激活。 75％关键帧什么时候停止100％？如果您能够准确地解释发生了什么，我们将不胜感激。我希望这个问题很清楚。感谢。

@-webkit-keyframes pulse {
  25% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  75% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}

@keyframes pulse {
  25% {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
  75% {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
}

.pulse {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  width: 50px;
  height: 50px;
  background-color: blue;
}

.pulse:hover {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

<div class="pulse">
  
</div>

Answer 1

嗨，如果您不需要动画，请添加

/sites/.../lists

这里发生的事情是动画不能启动25％，动画播放从25％到75％，75％后停止直到达到100％

关键帧动画

1 个答案: