Как сделать мигающий текст который бы выводил информацию на 3 языках?

Question

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
 
  <style>
   .blink {
    animation: blink 2s infinite;
   }
   @keyframes blink {
    from { opacity: 1; }
    to { opacity: 0;  }
   }
  </style>
 </head>
 <body>
  <p class="blink">привет</p>
 </body>
</html>

Всем привет, необходимо сделать мигающий текст Привет, чтобы после каждого затухания текст менялся на приветствие на другом языке, нужно всего 3-4 языка любых, но совершенно не понимаю как это сделать, если с морганием разобрался то с этим нет

Answer 1

Держи.

.blink span {
  animation: blink 3s infinite;
  animation-timing-function: linear;
  transition-timing-function: linear;
  display: inline-block;
  overflow: hidden;
}

@keyframes blink {
  from {
    opacity: 1;
    display: block;
  }
  33% {
    opacity: 0;
  }
  33% {
    opacity: 0;
    width: 0;
  }
  to {
    opacity: 0;
    width: 0;
  }
}

.blink .ru {
  animation-delay: -2s;
}

.blink .en {
  animation-delay: -1s;
}

<p class="blink">
  <span class="ru">Привет</span><span class="en">Hi there</span><span class="de">Guten tag</span>
</p>

БЛОГ НА HUSL

Как сделать мигающий текст который бы выводил информацию на 3 языках?

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