Ротатор слов

Мы делаем сайты
<span class="rot" data-rotate="быстрые|живые|дорогие">
  <b class="cur">быстрые</b>
</span>

<style>
.rot { display: inline-block; position: relative; overflow: hidden;
  min-width: 5.2em; color: #E84B16; }
.rot b.out { position: absolute; left: 0; top: 0;
  animation: rOut .5s cubic-bezier(.16,1,.3,1) forwards; }
.rot b.in { display: inline-block;
  animation: rIn .5s cubic-bezier(.16,1,.3,1); }
@keyframes rOut { to { transform: translateY(-110%); opacity: 0; } }
@keyframes rIn { from { transform: translateY(110%); opacity: 0; } }
</style>

<script>
var el = document.querySelector(".rot");
var list = el.getAttribute("data-rotate").split("|");
var idx = 0;
setInterval(function () {
  idx = (idx + 1) % list.length;
  var old = el.querySelector(".cur");
  old.className = "out";
  var nb = document.createElement("b");
  nb.className = "cur in";
  nb.textContent = list[idx];
  el.appendChild(nb);
  setTimeout(function () { old.remove(); }, 550);
}, 2200);
</script>

Сделай ротатор слов в заголовке: акцентное слово меняется каждые 2.2с — старое уезжает вверх (translateY(-110%) + opacity 0, absolute), новое въезжает снизу, обёртка inline-block с overflow:hidden и min-width под самое длинное слово (чтобы строка не дёргалась). Список слов в data-rotate через |. Кривая cubic-bezier(0.16,1,0.3,1), длительность 0.5s. При prefers-reduced-motion не крутить.