skeleton-elements/css/skeleton-effect.css

Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) - UI for improved perceived performance

.skeleton-effect-blink, .skeleton-effect-wave {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: 50% top;
  mask-position: 50% top;
  animation: skeleton-effect-wave 1s infinite;
}
.skeleton-effect-fade {
  animation: skeleton-effect-fade 1s infinite;
}
.skeleton-effect-pulse {
  animation: skeleton-effect-pulse 1s infinite;
}

@keyframes skeleton-effect-fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes skeleton-effect-wave {
  0% {
    -webkit-mask-position: 50% top;
    mask-position: 50% top;
  }
  100% {
    -webkit-mask-position: -150% top;
    mask-position: -150% top;
  }
}
@keyframes skeleton-effect-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.975);
  }
  100% {
    transform: scale(1);
  }
}