如何在 100% 的 CSS 动画后重置元素的位置？答案

【问题标题】：How to reset elements' position after 100% of CSS animation?如何在 100% 的 CSS 动画后重置元素的位置？
【发布时间】：2022-02-02 06:58:59
【问题描述】：

问题

气球能否被定位（动画）回到它的起始位置，这样它就不会往回走（就像 gif 一样）

#balloon {

/* the image is saved as svg code in html */
    background: url(/images/SVG/red_baloon_biggest.svg) no-repeat center;
    width: 16vw;
    height: 80vh;
    position: absolute;
    right: 20%;
    top: 80%;
    z-index: 1;
    animation: riseUp 16s ease-in 0s infinite forwards;
}

@keyframes riseUp {
    0% {
        transform: translateY(0px);
    }
    90% {
        transform: translateY(-140vh);
    }
}

<div id="balloon"></div>


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 199.9 535.3">
  <g id="Layer_2" data-name="Layer 2">
    <g id="OBJECTS">
      <g>
        <g>
          <path d="M150.7,11C128.4-2.3,60.2-13.9,22.1,42,53,103.4,124.5,152.6,109.2,227.8c-3.8,5.1-20.8,3-37.5,2-1.7,1.1-13.8,9.5-12.3,22s17.7,3,30.6,2.5,20.4,16.8,30.9,7.6-9.4-29.7-9.4-29.7,36.7-22,62.7-54.2C232.7,90.1,176.7,26.6,150.7,11Z" fill="#f35519"/>
          <path d="M109.2,227.8C124.5,152.6,53,103.4,22.1,42A127.6,127.6,0,0,0,6,75.1C-24.6,168,72,229.6,72,229.6l-.3.2C88.4,230.8,105.4,232.9,109.2,227.8Z" fill="#c24413"/>
          <path d="M109.2,23.1c17,13.4,45.5,22.5,55.7,66,12.2,52,32.3-8.2,8-43.8S83.1,2.4,109.2,23.1Z" fill="#fff" opacity="0.2"/>
        </g>
        <path d="M71.7,229.5a97.9,97.9,0,0,0,22.9,1.3,92,92,0,0,0,22.1-4.3,2.1,2.1,0,0,1,1.7,3.8h-.1a87.4,87.4,0,0,1-12.7,5.3,83.6,83.6,0,0,1-13.3,3.4,78.3,78.3,0,0,1-13.7,1.1,71.9,71.9,0,0,1-13.9-1.3,3.7,3.7,0,0,1-3.1-4.3,3.8,3.8,0,0,1,4.3-3.1h.3c8.3,1.4,16.9,2.3,25.4,2.9,4.2.1,8.5.5,12.7.3s8.3-.4,12.4-.7h.1a5.4,5.4,0,0,1,4.7,2.4,148.8,148.8,0,0,1,10.6,21.6,199.4,199.4,0,0,1,7.5,22.6,156.3,156.3,0,0,1,5,47.7,122.3,122.3,0,0,1-3.7,24,132.8,132.8,0,0,1-8.7,22.7,144.4,144.4,0,0,1-12.9,20.5c-4.9,6.2-10,12.3-15.5,18.1a198.7,198.7,0,0,1-36.5,30.2c-13.6,11.2-20.4,46.2-26,60.4-1.5,3.6-2.6,7.2-3.9,10.8l-1.7,5.5a25.2,25.2,0,0,1-2.3,5.7c-1.9,3.5-4.8,6.8-8.8,8.3s-8.2.6-11.7-1.1a.4.4,0,0,1-.1-.5c0-.1.2-.2.4-.1,3.5,1.5,7.5,2,11,.6a15.8,15.8,0,0,0,7.7-8c1.7-3.3,2.2-7.3,3.3-11s2.2-7.4,3.5-11.1c4.9-14.6,7.9-49.1,25.5-64.1a204.4,204.4,0,0,0,35.2-29.7c10.4-11.4,20.2-23.5,27-37.3A118.4,118.4,0,0,0,138.1,328a147.4,147.4,0,0,0-4.4-45.8,170,170,0,0,0-17-42.8l.5.2a112.9,112.9,0,0,1-13,.4c-4.4,0-8.7-.4-13-.7q-13-1.2-25.8-3.6l.2-.9a71,71,0,0,0,13.1,1.5,71.5,71.5,0,0,0,13.1-.7,88,88,0,0,0,25.3-7.5l.3.8a88,88,0,0,1-22.8,3.4,88.9,88.9,0,0,1-23-2.2c-.2,0-.3-.2-.3-.4Z" fill="#fdd15b"/>
      </g>
    </g>
  </g>
</svg>

代码需要稍微修改一下我无法将图像添加到 css，所以我在 html 标记内添加了气球 svg

【问题讨论】：

标签： html svg css-animations

【解决方案1】：

您的@keyframes 需要以 100% 的顶部位置结束。

@keyframes riseUp {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-140vh);
    }
}

在您的代码中，90% 到 100% 之间的隐含关键帧正在转换回起点 0% translateY(0px)。

这是最终输出的样子：

#balloon {
    width: 16vw;
    height: 80vh;
    position: absolute;
    right: 20%;
    top: 80%;
    z-index: 1;
    animation: riseUp 3s ease-in 0s infinite forwards;
}

@keyframes riseUp {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-140vh);
    }
}

<div id="balloon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 199.9 535.3">
  <g id="Layer_2" data-name="Layer 2">
    <g id="OBJECTS">
      <g>
        <g>
          <path d="M150.7,11C128.4-2.3,60.2-13.9,22.1,42,53,103.4,124.5,152.6,109.2,227.8c-3.8,5.1-20.8,3-37.5,2-1.7,1.1-13.8,9.5-12.3,22s17.7,3,30.6,2.5,20.4,16.8,30.9,7.6-9.4-29.7-9.4-29.7,36.7-22,62.7-54.2C232.7,90.1,176.7,26.6,150.7,11Z" fill="#f35519"/>
          <path d="M109.2,227.8C124.5,152.6,53,103.4,22.1,42A127.6,127.6,0,0,0,6,75.1C-24.6,168,72,229.6,72,229.6l-.3.2C88.4,230.8,105.4,232.9,109.2,227.8Z" fill="#c24413"/>
          <path d="M109.2,23.1c17,13.4,45.5,22.5,55.7,66,12.2,52,32.3-8.2,8-43.8S83.1,2.4,109.2,23.1Z" fill="#fff" opacity="0.2"/>
        </g>
        <path d="M71.7,229.5a97.9,97.9,0,0,0,22.9,1.3,92,92,0,0,0,22.1-4.3,2.1,2.1,0,0,1,1.7,3.8h-.1a87.4,87.4,0,0,1-12.7,5.3,83.6,83.6,0,0,1-13.3,3.4,78.3,78.3,0,0,1-13.7,1.1,71.9,71.9,0,0,1-13.9-1.3,3.7,3.7,0,0,1-3.1-4.3,3.8,3.8,0,0,1,4.3-3.1h.3c8.3,1.4,16.9,2.3,25.4,2.9,4.2.1,8.5.5,12.7.3s8.3-.4,12.4-.7h.1a5.4,5.4,0,0,1,4.7,2.4,148.8,148.8,0,0,1,10.6,21.6,199.4,199.4,0,0,1,7.5,22.6,156.3,156.3,0,0,1,5,47.7,122.3,122.3,0,0,1-3.7,24,132.8,132.8,0,0,1-8.7,22.7,144.4,144.4,0,0,1-12.9,20.5c-4.9,6.2-10,12.3-15.5,18.1a198.7,198.7,0,0,1-36.5,30.2c-13.6,11.2-20.4,46.2-26,60.4-1.5,3.6-2.6,7.2-3.9,10.8l-1.7,5.5a25.2,25.2,0,0,1-2.3,5.7c-1.9,3.5-4.8,6.8-8.8,8.3s-8.2.6-11.7-1.1a.4.4,0,0,1-.1-.5c0-.1.2-.2.4-.1,3.5,1.5,7.5,2,11,.6a15.8,15.8,0,0,0,7.7-8c1.7-3.3,2.2-7.3,3.3-11s2.2-7.4,3.5-11.1c4.9-14.6,7.9-49.1,25.5-64.1a204.4,204.4,0,0,0,35.2-29.7c10.4-11.4,20.2-23.5,27-37.3A118.4,118.4,0,0,0,138.1,328a147.4,147.4,0,0,0-4.4-45.8,170,170,0,0,0-17-42.8l.5.2a112.9,112.9,0,0,1-13,.4c-4.4,0-8.7-.4-13-.7q-13-1.2-25.8-3.6l.2-.9a71,71,0,0,0,13.1,1.5,71.5,71.5,0,0,0,13.1-.7,88,88,0,0,0,25.3-7.5l.3.8a88,88,0,0,1-22.8,3.4,88.9,88.9,0,0,1-23-2.2c-.2,0-.3-.2-.3-.4Z" fill="#fdd15b"/>
      </g>
    </g>
  </g>
</svg>
</div>

【讨论】：