.skeleton-effect {
  &-blink,
  &-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;
  }

  &-fade {
    animation: skeleton-effect-fade 1s infinite;
  }

  &-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);
  }
}