Зацикленная CSS анимация

На сайте https://uttermouse.com/ есть анимация в виде печатающего программиста. Как зациклить подобную анимацию, имея картинку? введите сюда описание изображения


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

Автор решения: Leonid Zakhariants

Вот ваша анимация которую хотели

// для элементов которые движутся верх вниз
animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lightSpeedLeft,3s Infinite linear floating;
// для элемента который движется на фоне
animation: 3s Infinite linear shake;

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes lightSpeedLeft {
  from {
    transform: translate3d(-50%, 0, 0) skewX(20deg);
    opacity: 0;
  }
  60% {
    transform: skewX(-10deg);
    opacity: 1;
  }
  80% {
    transform: skewX(2deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes floating {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

→ Ссылка