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时，这意味着第一个周期为5s ，并在接下来的 5 秒内让您的 div 横向扩展。

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

因此，如果您看到，动画在 1 处完美结束，因此它可以完美地工作，如果您希望做其他事情，请发表评论，我将相应地修改我的答案..

Demo (我已将动画迭代减少到 2 = 20 秒)

Note: Use Chrome to see the Demo as OP is using only -webkit and haven't requested any code for Firefox or 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%;
}