Css 动画生命周期

Question

我不明白如何在某个固定的时间段内运行动画。

这里是动画的来源：

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
}

所以我修改了我想要应用pulse的元素的css。

-webkit-animation-duration: 10s;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 10;

据我了解文档，动画应运行 10 次，每次 10 秒。所以，100秒。但这是错误的。将动画寿命指定为 100 秒的正确方法是什么？

Answer 1

好的，所以你说你得到的计时功能不正确，我不同意，当你将动画持续时间设置为10s 时，第一个周期为 5 秒，下一个周期为 5 秒5 秒让您的 div 横向扩展。

我在这里使用 JavaScript 倒计时，并且还使用设置为 1 秒的 animation-delay 属性，只是为了与我从 here 获取的 JavaScript 倒计时同步...

因此，如果您看到，动画在 1 处完美结束，因此它可以完美运行，如果您希望做其他事情而不是请评论，我会相应地修改我的答案..

Demo （我已将动画迭代减少到 2 = 20 秒）

注意：使用 Chrome 观看演示，因为 OP 仅使用 -webkit 和 没有为 Firefox 或 Internet Explorer 请求任何代码。

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(2);
        transform: scale(2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 10s;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: 2;
    position: absolute;
    left: 50%;
    font-size: 50px;
    top: 10%;
}