css - 如何让 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

将以下代码添加到您的 css 中进行一次迭代

animation-iteration-count: 1