在动画结尾隐藏文本答案

【问题标题】：hide a text at the end of the animation在动画结尾隐藏文本
【发布时间】：2021-06-19 23:43:47
【问题描述】：

 .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;
   }
 }

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

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

标签： html css animation css-animations transition

【解决方案1】：

如果您甚至将显示属性从无切换到阻塞，您在其他元素上的转换将不会发生。它仅适用于显示的元素。如果你想隐藏元素，你可以使用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;
   }
 }

&lt;div class="title2"/&gt;

【讨论】：

【解决方案2】：

您可以使用 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;
  }
}

【讨论】：