CSS动画如何通过CSS密钥帧进行循环后停止

Question

我正在尝试获得一旦使用CSS动画和密钥帧运行的缩放效果。但是，变焦持续不断，不会停止。我如何才能使它循环一次？

    header {
    height: 100vh;
    width: 100%;
    float: left;
    height: calc(100vh - 40px);
    position: static;
    overflow: hidden;
    background: url("../uploads/header-image.jpg");
    background-size:100%;
    background-position: center center;
    animation: imagezoom 8s forwards;
}
@keyframes imagezoom {
  0%, 100% {
    background-size: 110% auto;
    -webkit-background-size: 110%;
  }
  50% {
    background-size: 100% auto;
    -webkit-background-size: 100%;
  }
}

Answer 1

在一个迭代中添加以下代码

animation-iteration-count: 1