Анимация печатающегося текста

Question

Вот html

<h1>Закажите <span>сейчас</span> ремонт принтера</h1>

Вот так получается

Нужно сделать анимацию печатающегося текста слова "СЕЙЧАС". Нужно чтобы слово "СЕЙЧАС" раскрывалось и закрывалось по циклу с определенным интервалом. Как это сделать?

Answer 1

Вариант на CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&display=swap');

h1 {
  display: block;
  width: 100%;
  max-width: 400px;
  font-size: 300%;
  color: #092f6e;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

h1 > span {
  display: inline-block;
  color: rgba(0,0,0,.15);
  font-weight: 900;
  overflow: hidden;
  position: relative;
  vertical-align: top;
}

h1 > span::after {
  content: '\Aс\Aсе\Aсей\Aсейч\Aсейча\Aсейчас\Aсейчас\Aсейчас'; 
  display: block;
  color: #12baa9;
  white-space: break-spaces;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(0%);
  animation: TextPrint 4s steps(9, start) infinite;
}

@keyframes TextPrint {
  100% {
    transform: translateY(-100%);
  }
}

<h1>Закажите <span>сейчас</span><br>ремонт принтера</h1>

Написал "шаблонизатор" под код выше.
После "КОНВЕРТИРОВАНИЯ" просто копируете код из текстареа и заменяете его в h1 > span::after из кода выше.

$('#con').on('click', Convert);

function Convert() {
  let w = $('#word').val().trim(), wt = '', wa = [], war, ds = Number($('#delay_s').val()), de = Number($('#delay_e').val()), s = $('#invert').prop('checked');
  for(let i = 0; i < w.length; i++) wa.push(i > 0 ? wa[i - 1] + w[i] : w[0]);
  let wac = wa.slice();
  if(ds > 0) wac = new Array(ds).fill(' ').concat(wa);
  if(de > 0) wac = wa.concat(new Array(de).fill(w));
  if(s) wac = wac.concat(wa.reverse());
  war = '\\A '+wac.join('\\A ');
  $('#demo').text(w).css({'--content': `'${war}'`, '--step': String(wac.length+1)});
  $('#res').text('content: \''+war+'\';\nanimation-timing-function: steps('+String(wac.length+1)+', start);');
}
Convert();

#res {
  width: 100%;
  height: 50px;
  white-space: pre;
}

#demo {
  display: inline-block;
  color: rgba(0, 0, 0, .15);
  font-weight: 900;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  font-size: 40px;
}

#demo::after {
  content: var(--content, '\A D\A DE\A DEM\A DEMO');
  display: block;
  color: #12baa9;
  font: inherit;
  white-space: break-spaces;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(0%);
  animation: TextPrint 4s steps(var(--step, 5), start) infinite;
}

@keyframes TextPrint {
  100% {
    transform: translateY(-100%);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
  <legend>Настройка</legend>
  <label for="word">Текст который будет печатным</label><br>
  <input type="text" id="word" value="DEMO"><br><br>
  <label>Ожидание перед "набором текста" (шагов)</label><br>
  <input id="delay_s" type="number" min="0" value="0"><br><br>
  <label>Ожидание после "набора" (шагов)</label><br>
  <input id="delay_e" type="number" min="0" value="0"><br><br>
  <label>"Набрать" и "Стереть"</label><br>
  <input id="invert" type="checkbox"><br><br>
  <button id="con">КОНВЕРТИРОВАТЬ</button>
</fieldset>
<fieldset>
  <legend>Результат</legend>
  <div>
    <div id="demo">DEMO</div>
  </div>
  <textarea id="res" spellcheck="false"></textarea>
</fieldset>

Нужно чтобы слово "СЕЙЧАС" раскрывалось и закрывалось..

Тут это можно настроить

Answer 2

Компактный вариант для моноширенного шрифта:

h1 {
  font-family: monospace;
  line-height: 2em;
}

span {
  display: inline-block;
  width: 6ch;
  height: 2em;
  overflow: hidden;
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: break-all;
}

span::before {
  content: "";
  float: right;
  height: 100%;
  margin-right: -1ch;
  animation: shrink steps(7) 6s infinite;
}

@keyframes shrink {
  from { width: calc(100% + 1ch); }
  to { width: 0; }
}

<h1>Закажите <span>сейчас</span> ремонт принтера</h1>

Answer 3

Да, с моноширинными шрифтом всё просто:

h1 { font: bold 24px/1em 'Consolas', monospace; }

span {
  display: inline-block;
  height: 1em; width: 0ch;
  overflow: hidden;
  margin-right: 6ch;
  vertical-align: top;
  animation: shrink steps(6) 3s infinite alternate;
}

@keyframes shrink {
  0%, 10% { width: 0ch; margin-right: 6ch; }
  40%, 100% { width: 6ch; margin-right: 0ch; }
}

<h1>Закажите <span>сейчас</span> ремонт принтера</h1>

Или так:

h1 {
  font: bold 24px/1em 'Consolas', monospace;
}

span {
  display: inline-flex;
  height: 1em; width: 0ch;
  overflow: hidden;
  margin-right: 6ch; margin-left: 0ch;
  vertical-align: top;
  animation: shrink steps(6) 4s infinite;
}

@keyframes shrink {
  0%, 5% {
    width: 0ch;
    margin-right: 6ch; margin-left: 0ch;
    justify-content: flex-start;
  }
  30%, 50% {
    width: 6ch;
    margin-right: 0ch;
    justify-content: flex-start;
  }
  51%, 70% {
    width: 6ch;
    margin-left: 0ch;
    justify-content: flex-end;
  }
  95%, 100% {
    width: 0ch;
    margin-left: 6ch; margin-right: 0ch;
    justify-content: flex-end;
  }
}

<h1>Закажите <span>сейчас</span> ремонт принтера</h1>

Answer 4

Если вложить хвост в каждую букву, то можно их и скрывать на 1/6 с хвостиком:

h1 {
  font-style: italic;
}

span {
  animation: blink-6 7s step-start infinite both;
}

.l1 { animation-delay: 0s; }
.l2 { animation-delay: 1s; }
.l3 { animation-delay: 2s; }
.l4 { animation-delay: 3s; }
.l5 { animation-delay: 4s; }
.l6 { animation-delay: 5s; }

@keyframes blink-6 {
      0% { opacity: 0; }
 16.667% { opacity: 0; }
 16.668% { opacity: 1; }
    100% { opacity: 1; }
}

<h1>Закажите <span class=l1>с<span class=l2>е<span class=l3>й<span class=l4>ч<span class=l5>а<span class=l6>с</span></span></span></span></span></span> ремонт принтера</h1>

PS: И ещё вариант - не то, но прикольно получилось и жалко удалять:

span {
  animation: blink 6s steps(2) infinite;
}

.l1 { animation-delay: 0s; }
.l2 { animation-delay: 1s; }
.l3 { animation-delay: 2s; }
.l4 { animation-delay: 3s; }
.l5 { animation-delay: 4s; }
.l6 { animation-delay: 5s; }

@keyframes blink {
   0% { visibility: hidden; }
 100% { visibility: visible; }
}

<h1>Закажите <span class=l1>с<span class=l2>е<span class=l3>й<span class=l4>ч<span class=l5>а<span class=l6>с</span></span></span></span></span></span> ремонт принтера</h1>

БЛОГ НА HUSL

Анимация печатающегося текста

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