Плавное появление элемента

Question

У меня есть меню простенькое. Как сделать чтобы при входе на страницу он плавно появлялся???

<header>
    <div><a href = "#">Пункт 1</a></div>
    <div><a href = "#">Пункт 2</a></div>
    <div><a href = "#">Пункт 3</a></div>
    <div><a href = "#">Пункт 4</a></div>
    <div><a href = "#">Пункт 5</a></div>
    </header>

Answer 1

Например можно удалять класс, вот так:

window.onload = () => document.querySelector('header').classList.remove('hidden');

.hidden {
  opacity: 0;
}

header {
  transition: all 5s ease;
}

<header class="hidden">
  <div><a href = "#">Пункт 1</a></div>
  <div><a href = "#">Пункт 2</a></div>
  <div><a href = "#">Пункт 3</a></div>
  <div><a href = "#">Пункт 4</a></div>
  <div><a href = "#">Пункт 5</a></div>
</header>

Answer 2

Не нужны здесь никакие лишние скрипты. Вот несколько примеров на CSS:

Один:

header {
  opacity: 0;
  animation: ani 2.5s forwards;
}

@keyframes ani {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

<header>
  <div><a href="#">Пункт 1</a></div>
  <div><a href="#">Пункт 2</a></div>
  <div><a href="#">Пункт 3</a></div>
  <div><a href="#">Пункт 4</a></div>
  <div><a href="#">Пункт 5</a></div>
</header>

Два:

header {
  transform: translateX(-150%);
  animation: ani 1s forwards;
}

@keyframes ani {
  0% {transform: translateX(-150%);}
  100% {transform: translateY(0);}
}

<header>
  <div><a href="#">Пункт 1</a></div>
  <div><a href="#">Пункт 2</a></div>
  <div><a href="#">Пункт 3</a></div>
  <div><a href="#">Пункт 4</a></div>
  <div><a href="#">Пункт 5</a></div>
</header>

Три:

header {
  transform: translateY(-150%);
  animation: ani 1s forwards;
}

@keyframes ani {
  0% {transform: translateY(-150%);}
  100% {transform: translateY(0);}
}

<header>
  <div><a href="#">Пункт 1</a></div>
  <div><a href="#">Пункт 2</a></div>
  <div><a href="#">Пункт 3</a></div>
  <div><a href="#">Пункт 4</a></div>
  <div><a href="#">Пункт 5</a></div>
</header>

Четыре:

header {
  font-size: 0;
  animation: ani 2s forwards;
}

@keyframes ani {
  0% {font-size: 0;}
  100% {font-size: 16px;}
}

<header>
  <div><a href="#">Пункт 1</a></div>
  <div><a href="#">Пункт 2</a></div>
  <div><a href="#">Пункт 3</a></div>
  <div><a href="#">Пункт 4</a></div>
  <div><a href="#">Пункт 5</a></div>
</header>

Пять:

header {
  position: absolute; overflow: hidden; top: 15px; left: 0; width: 0;
  text-align: right; white-space: nowrap;
  animation: ani 1s linear forwards;
}

@keyframes ani {
  0% {left: 40px; width: 0;}
  100% {left: 0; width: 75px;}
}

<header>
  <div><a href="#">Пункт 1</a></div>
  <div><a href="#">Пункт 2</a></div>
  <div><a href="#">Пункт 3</a></div>
  <div><a href="#">Пункт 4</a></div>
  <div><a href="#">Пункт 5</a></div>
</header>

И ещё:

header>div {transform: translateX(-150%);}
header>div:nth-child(1) {animation: ani 0.5s ease-in-out forwards;}
header>div:nth-child(2) {animation: ani 0.5s forwards 0.5s;}
header>div:nth-child(3) {animation: ani 0.5s forwards 1s;}
header>div:nth-child(4) {animation: ani 0.5s forwards 1.5s;}
header>div:nth-child(5) {animation: ani 0.5s forwards 2s;}

@keyframes ani {
  0% {transform: translateX(-150%);}
  15% {transform: translateX(5%);}
  30% {transform: translateX(-5%);}
  45% {transform: translateX(3%);}
  60% {transform: translateX(-3%);}
  75% {transform: translateX(1%);}
  85% {transform: translateX(-1%);}
  100% {transform: translateX(0);}
}

<header>
  <div><a href="#">Пункт 1</a></div>
  <div><a href="#">Пункт 2</a></div>
  <div><a href="#">Пункт 3</a></div>
  <div><a href="#">Пункт 4</a></div>
  <div><a href="#">Пункт 5</a></div>
</header>

БЛОГ НА HUSL

Плавное появление элемента

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