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

Анимации, переходы и трансформации — Анимация градиента (shimmer)

Фрагмент из «Анимации, переходы и трансформации»: Анимация градиента (shimmer).

css cssencyclopedia6 embed URL статья в энциклопедии
CSS main.css 
.shimmer {
  background: linear-gradient(
    90deg,
    #e2e8f0 0%,
    #f8fafc 40%,
    #e2e8f0 80%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.shimmer {
  background: linear-gradient(
    90deg,
    #e2e8f0 0%,
    #f8fafc 40%,
    #e2e8f0 80%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}