如何让 CSS 动画在通过 CSS 关键帧循环一次后停止？答案

【问题标题】：How do I get a CSS animation to stop after it has looped once through the CSS keyframes?如何让 CSS 动画在通过 CSS 关键帧循环一次后停止？
【发布时间】：2017-09-14 19:31:11
【问题描述】：

我正在尝试使用 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%;
  }
}

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/…
我将动画迭代计数设置为 1，并将“无限”更改为“前进”，但这不起作用。
请提供html代码

标签： css css-animations keyframe

【解决方案1】：

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

animation-iteration-count: 1

【讨论】：