Question

我用CSS3制作了一些动画。

来源是如此简单。只需打印文字，然后在4秒后消失即可。

以下是当前来源。

const intro1 = document.getElementsByClassName('intro1')[0];

setTimeout(() => {
  intro1.classList.remove('fade-in');
  intro1.classList.add('fade-out');
}, 3500);

body {
  margin: 30px 0;
  padding: 0 15px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aliceblue;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  font-weight: 100;
}

span {
  text-align: center;
  position: absolute;
}


/* Intro animation */

.fade-in {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  animation: fadeIn 4s;
}

.fade-out {
  animation: fadeOut 1s;
}

@keyframes fadeIn {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <main>
    <section>

      <span class="intro1 fade-in">TEST TEST TEST TEST TEST TEST TEST TEST </span>

    </section>
  </main>
  <script src="src.js"></script>
</body>

</html>

我定义了fade-in和fade-out并将.intro1的类名初始化为'fade-in'。

使用setTimeout延迟3.5秒，删除类fade-in并添加类fade-out以使其消失。

当我启动它时，文本出现和消失都是可以的。

但是文本消失后，它会再次显示如下。

我不想在文本的不透明度变为0之后再次显示。

有什么解决办法吗？

谢谢。

Answer 1

您必须将此添加到fade-out类

.fade-out {
  animation: fadeOut 1s;
  animation-fill-mode: forwards; // that's what you need to add
}

关于animation-fill-mode：

animation-fill-mode属性可在不播放动画时（在开始之前，结束之后，或两者同时）指定目标元素的样式。

animation-fill-mode属性可以具有以下值：

none-默认值。动画在执行之前或之后不会对元素应用任何样式

forwards-元素将保留由最后一个关键帧设置的样式值（取决于动画方向和动画迭代次数）

backwards-元素将获得由第一个关键帧设置的样式值（取决于动画方向），并在动画延迟期间保留该值。

both-动画将遵循向前和向后的规则，在两个方向上扩展动画属性

具有setTimeout的CSS动画不起作用

1 个答案: