.blurry-load {
  filter: blur(8px);
}

@keyframes blurOut {
  0% {
    filter: blur(20px);
  }

  50% {
    filter: blur(10px);
  }

  100% {
    filter: blur(0px);
  }
}
/* Create the blurOut animation
 To be used for all images with the blur-image class */

.blur-out {
  animation: blurOut 0.5s ease-out;
}

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

  100% {
    background-position: 100vw 0;
  }
}
/* Create the shimmer animation
 This will create left to right shimmer effect
 for the no-blur class below
 Use -100vw to 100vw for the background position property
 to ensure that this will work with different sized elements
 (using -100% to 100% was resulting in a shimmer effect that didn't move left to right) */

.no-blur {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: gradient(
    linear,
    left top,
    right top,
    color-stop(8%, #eeeeee),
    color-stop(18%, #dddddd),
    color-stop(33%, #eeeeee)
  );
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
}
/* The no-blur class will be applied when the browser does not support CSS filters
 Instead of showing a blurred image, a gray div with the shimmer animation is shown */