5

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

<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>

2 ответа 2

21

Не нужны здесь никакие лишние скрипты. Вот несколько примеров на 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>

3
  • 3
    Божественно :) Тот момент, когда нужно положить тему в закладки, чтобы очередной раз не бегать по мануалам. Респект.
    – Majestio
    23 апр 2021 в 19:33
  • 1
    Вот именно, две строчки, которые вовремя забываются)
    – Majestio
    23 апр 2021 в 20:08
  • 1
    @Sevastopol Большое спасибо) 24 апр 2021 в 13:08
4

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

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.