Как сделать такую анимацию?

Question

[Кирилл Трифонов]

Как сделать такую же анимацию?

Как здесь

Только не с картинками как на сайте выше, а обычным текстом с задним фоном

Answer 1

[Сергей Тутуков]

Чистый CSS
codepen.io/STutukov/pen/gmgZdW?editors=1100

UPD:
также можно сделать через:
1. svg
2. mix-blend-mode
3. codepen.io/hendrysadrak/pen/VLMOMJ - что-то типо этого
4. shpargalkablog.ru/2013/11/gradient-text.html
5. И т.д.

Answer 2

[Денис Букреев]

Почему там сделано картинками, а не текстом?

Answer 3

[alvvi]

А какая, собственно говоря, разница картинками оно или текстом?

Насколько я вижу это просто анимированный div с заданными фиксированными размерами, сверху на него вы можете хоть инлайн svg поместить, разницы не будет.

Если интересует сама анимация, то она есть в source-файлах этого же сайта

.loader__logo--white {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background-image: url(/img/global/omnam_logo-white.png);
  -webkit-animation-name: loading;
  animation-name: loading;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-play-state: playing;
  animation-play-state: playing;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@keyframes loading {
  0% {
    width: 0%;
    opacity: 1;
  }
  60% {
    width: 100%;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Если заменить свойство

background-image: url(/img/global/omnam_logo-white.png);

на
background-color: #fff;

то все будет по-прежнему работать.

Answer 4

[arthan1011]

Вдруг поможет:
codepen.io/arthan/pen/KWaezE