Анимация прокрутки на css?

Question

[fessss]

Набросал пример
https://codepen.io/anon/pen/QzKVYM
Вопрос к знатокам анимации: как сделать так, чтоб цифра перевернулась, произошла задержка и след цифра пошла?

Answer 1

[0xD34F]

Разным элементам назначаете разный animation-delay, а для "задержки" указываете в keyframes промежуток без изменения значения:

<div class="wrapper">
  <div class="block">hello, world!!</div>
  <div class="block">fuck the world</div>
  <div class="block">fuck everything</div>
</div>

.wrapper {
  width: 150px;
  height: 20px;
  font-size: 16px;
  border: 1px solid #000;
  overflow: hidden;
  position: relative;
}

@keyframes movingTopToBottom {
  0% {
    top: 55px;
  }
  40%, 60% {
    top: 0px;
  }
  100% {
    top: -55px;
  }
}

.block {
  animation: movingTopToBottom 6s linear infinite;
  position: absolute;
}

.block:nth-child(1) { animation-delay:  0s; }
.block:nth-child(2) { animation-delay: -4s; }
.block:nth-child(3) { animation-delay: -2s; }

Comments

[fessss]

Спасибо большое