Не могу добиться исчезновения элемента при загрузке страницы!

Question

Не могу добиться исчезновения надписи при запуске страницы, по ссылке можете посмотреть существующий пример. При загрузке страницы надпись, находящаяся над другими элементами должна плавно исчезать за 2 секунды.

Заранее благодарю за ответы и помощь!

.seriestitle {
  z-index: 998;
  position: absolute;
  left: 1rem;
  width: 100%;
  max-width: calc(100% - 2rem);
  top: 50%;
  text-align: center;
  transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  letter-spacing: -.03em;
}

.yellowFont {
  color: green;
  font-size: 2.8125rem;
  font-size: 9vw;
  line-height: 0.9375em;
  text-shadow: 0px 3px 6px rgba(10, 10, 10, 0.4);
}

<div class="seriestitle yellowFont"> Example </div>

Answer 1

Можно использовать @keyframes почитайте

.seriestitle {
  z-index: 998;
  position: absolute;
  left: 1rem;
  width: 100%;
  max-width: calc(100% - 2rem);
  top: 50%;
  text-align: center;
  transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  letter-spacing: -.03em;
  animation: anime 2s ease-in-out forwards;
}

.yellowFont {
  color: green;
  font-size: 2.8125rem;
  font-size: 9vw;
  line-height: 0.9375em;
  text-shadow: 0px 3px 6px rgba(10, 10, 10, 0.4);
}

@keyframes anime {
  0%{
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

<div class="seriestitle yellowFont"> Example </div>

Answer 2

.seriestitle {
  z-index: 998;
  position: absolute;
  left: 1rem;
  width: 100%;
  max-width: calc(100% - 2rem);
  top: 50%;
  text-align: center;
  transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  letter-spacing: -.03em;
  animation: dissapear 1s linear 1s 1 forwards;
}

.yellowFont {
  color: green;
  font-size: 2.8125rem;
  font-size: 9vw;
  line-height: 0.9375em;
  text-shadow: 0px 3px 6px rgba(10, 10, 10, 0.4);
}

@keyframes dissapear{
0%{
  opacity 1;
  visibility: visible;
}
 100%{
  opacity: 0;
  visibility: hidden;
}
}

<div class="seriestitle yellowFont"> Example </div>

БЛОГ НА HUSL

Не могу добиться исчезновения элемента при загрузке страницы!

Ответы (2 шт):