如何精确控制CSS3动画完成并删除最后一帧后的元素？

控制 CSS3 动画完成

在 Web 开发领域，CSS3 动画已成为增强用户体验的强大工具。 Однако，在设计需要精确控制其最终状态的动画时，在最后一帧停止它们可能会带来挑战。

本文解决了这样的场景，其中多部分 CSS3 动画在单击时播放，最后一部分旨在从屏幕上删除一个 div。不幸的是，动画不断地恢复到原始状态。为了解决这个问题，我们探索了两种解决方案：

1。冻结最后一帧的动画：

要冻结最后一帧的动画（100% 完成），我们使用 CSS 属性 animation-fill-mode:forwards; 。该指令指示浏览器即使在动画结束后也保持最终的动画状态。

2.在动画之后删除 Div：

或者，如果需要完全删除 div，我们可以在动画播放后使用 JavaScript 从 DOM 中删除元素。这可以通过以下顺序来实现：

document.getElementById("myDiv").addEventListener("animationend", function() {
  this.parentNode.removeChild(this);
});

当动画完成时，会触发“animationend”事件，导致 div 从页面中删除。

示例：

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

#myDiv {
  animation: colorchange 1s infinite;
  animation-fill-mode: forwards;
}

在此示例中，ID 为“myDiv”的 div 经历动画以缩放和旋转变换结束。通过设置“animation-fill-mode:forwards;”，动画结束后保留​​最终状态。

以上是如何精确控制CSS3动画完成并删除最后一帧后的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！