html – Smooth appearance of an element

Question:

I have a simple menu. How to make it appear smoothly when entering the page ???

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

No extra scripts needed here. Here are some CSS examples:

One:

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>

Two:

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>

Three:

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>

Four:

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>

Five:

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>

And further:

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>
Post Views: 1
Scroll to Top