在动画结束时隐藏文本

Question

 .title2 {
   position: absolute;
   top: 0;
   right: 31%;
   animation-name: fadeOutOpacity;
   animation-iteration-count: 1;
   animation-delay: 2.5s;
   animation-timing-function: ease-out;
   animation-duration: 1s;
 }
 @keyframes fadeOutOpacity {
   0% {
     opacity: 1;
   }
   90% {
     opacity: 0;
   }
   100% {
     display: none;
   }
 }

有人可以向我解释一下如何让它消失吗？我以为它起作用了，但它不起作用！我想让文本消失，效果有效，但当我想在动画结束时永久隐藏它时，文本又恢复可见。

Answer 1

您可以使用 CSS 属性 animation-fill-mode，并像这样更改您的关键帧动画：

.title2 {
  position: absolute;
  top: 0;
  right: 31%;
  animation-name: fadeOutOpacity;
  animation-iteration-count: 1;
  animation-delay: 2.5s;
  animation-timing-function: ease-out;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeOutOpacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Answer 2

如果您甚至将显示属性从 none 切换为块，您对其他元素的转换将不会发生。它仅适用于显示的元素。如果你想隐藏元素你可以使用 opacity, height

.title2 {
  width: 100px;
  height: 50px;
  background: red;
   position: absolute;
   top: 0;
   right: 31%;
   animation: 1s fadeOutOpacity ease-out;
   opacity: 0
 }
 @keyframes fadeOutOpacity {
   0% {
     opacity: 1;
   }
   100% {
     opacity: 0;
   }
 }

<div class="title2"/>

在动画结束时隐藏文本

hide a text at the end of the animation

html

css

animation

transition

css-animations