Код IT
← Каталог

Переменные в CSS — Анимация и переменные

Фрагмент из «Переменные в CSS»: Анимация и переменные.

css cssencyclopedia1111 embed URL статья в энциклопедии
CSS main.css 
.box {
  --offset: 0;
  transform: translateX(var(--offset));
  animation: moveBox 1s infinite alternate;
}

@keyframes moveBox {
  0% {
    --offset: 0;
  }
  50% {
    --offset: 50px;
  }
  100% {
    --offset: 100px;
  }
}
.box {
  --offset: 0;
  transform: translateX(var(--offset));
  animation: moveBox 1s infinite alternate;
}

@keyframes moveBox {
  0% {
    --offset: 0;
  }
  50% {
    --offset: 50px;
  }
  100% {
    --offset: 100px;
  }
}