[分享]css动画怎么让最后属性保留

在 CSS 动画中，当动画完成时，我们希望最终属性值保留在元素上，而不是返回到原始状态。这可以通过将 animationfillmode 属性设置为“forwards”来实现。例如：.element ...

在 CSS 动画中，当动画完成时，我们希望最终属性值保留在元素上，而不是返回到原始状态。这可以通过将 animation-fill-mode 属性设置为“forwards”来实现。例如：

.element {
  animation: myanimation 2s;
  animation-fill-mode: forwards;
}

@keyframes myanimation {
  from { opacity: 0; }
  to { opacity: 1; }
} 

在上面的代码中，我们定义了一个名为“myanimation”的动画，将元素的不透明度从 0 变成 1，持续时间为 2 秒。然后，我们将 animation-fill-mode 属性设置为“forwards”，这将使元素在动画完成后保留最终属性值（在本例中为不透明度为 1）。

值得注意的是，如果您在使用 animation-fill-mode 时使用了 animation-play-state 属性，则需要将两个属性都设置为“forwards”，才能使最终属性值保留在元素上。例如：

.element {
  animation: myanimation 2s;
  animation-fill-mode: forwards;
  animation-play-state: paused; /* 将动画暂停，直到 JavaScript 放弃 */
}

/* 当您准备恢复动画时，调用 JavaScript 以将 animation-play-state 设置为“running” */ 

在上面的代码中，我们添加了 animation-play-state 属性，将动画暂停直到 JavaScript 放弃。在恢复动画时，需要将 animation-play-state 属性设置为“running”，以便动画继续播放。