带有 setTimeout 的 css 动画不起作用

Question

I made some animation with CSS3.我用 CSS3 制作了一些动画。

Source is so simple.来源就这么简单。 Just print text and disappear it after 4s.只需打印文本并在 4 秒后消失。

Below is current source.以下是当前来源。

 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>

I defined fade-in and fade-out and initialize .intro1 's classname to 'fade-in' .我定义了fade-in和fade-out ，并将.intro1的类名初始化为'fade-in' 。

And delay 3.5s with setTimeout , remove class fade-in and add class fade-out to disappear it.并使用setTimeout延迟 3.5 setTimeout ，删除类fade-in并添加类fade-out以使其消失。

When I start it, text appear and disappear is works fine.当我启动它时，文本出现和消失工作正常。

But after text disappear, it shows again like this.但是文字消失后，又是这样显示的。

I do not want to show again after text's opacity becomes to 0.我不想在文本的不透明度变为 0 后再次显示。

Any solution about this?关于这个的任何解决方案？

Thanks.谢谢。

Answer 1

You have to add this to fade-out class您必须将此添加到fade-out类

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

About animation-fill-mode :关于animation-fill-mode ：

The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both). animation-fill-mode属性指定动画未播放时（开始前、结束后或两者）时目标元素的样式。

The animation-fill-mode property can have the following values:动画填充模式属性可以具有以下值：

none - Default value. none - 默认值。 Animation will not apply any styles to the element before or after it is executing动画在执行之前或之后不会对元素应用任何样式

forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) forwards - 该元素将保留由最后一个关键帧设置的样式值（取决于动画方向和动画迭代计数）

backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period backwards - 元素将获得由第一个关键帧设置的样式值（取决于动画方向），并在动画延迟期间保留它

both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions both - 动画将遵循向前和向后的规则，在两个方向上扩展动画属性

带有 setTimeout 的 css 动画不起作用

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-09-20 06:47:44

带有 setTimeout 的 css 动画不起作用

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-09-20 06:47:44

解决方案1
2 已采纳 2018-09-20 06:47:44