javascript - 使用 CSS 动画让 HTML 元素消失

Question

我想知道是否有办法让 HTML 元素通过 CSS 动画消失。因此，当元素被某些脚本从页面中删除时，动画将在元素实际被删除之前显示。

这有可能以一种简单的方式实现吗？或者我是否需要为我的脚本设置一个计时器，以 X 的持续时间启动动画并在时间 X 之后删除元素？

Answer 1

我会喜欢关键帧

@keyframes myAnimation{
  0%{
    opacity: 1;
    transform: rotateX(90deg);
  }
  50%{
    opacity: 0.5;
    transform: rotateX(0deg);
  }
  100%{
    display: none;
    opacity: 0;
    transform: rotateX(90deg);
  }
}

#myelement{
    animation-name: myAnimation;
    animation-duration: 2000ms;
    animation-fill-mode: forwards;
}