Я сделал некоторую анимацию с помощью 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'.
Изадержать 3,5 с setTimeout, удалить класс fade-in и добавить класс fade-out, чтобы удалить его.
Когда я его запускаю, текст появляется и исчезает, работает нормально.
Но послетекст исчезает, он снова отображается следующим образом.
Я не хочу показывать снова, когда непрозрачность текста становится равной 0.
Любое решение по этому поводу?
Спасибо.