JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

CSS

html,
body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

body {
  transform: translateZ(0);
}

body::before,
body::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  will-change: filter, transform;
}

body::before {
  filter: blur(2px);
  transform: scale(1.1);
  background: url("https://scottkaye.blob.core.windows.net/files/forest.jpg") no-repeat;
  background-position: center;
  background-size: cover;
  animation: ken-burns 5s ease infinite alternate;
}

body::after {
  background: url("https://scottkaye.blob.core.windows.net/files/leaves.png") no-repeat;
  background-size: 50%;
  background-position: top right;
  filter: saturate(80%) drop-shadow(0 0 10px rgba(0, 0, 0, 0.25)) blur(0.5px);
  content: "";
  display: block;
  z-index: 1;
  transform-origin: top right;
  animation: blur 5s ease infinite alternate;
  
}

@keyframes ken-burns {
  100% {
    transform: scale(1.2) translate(-5%, 3%);
    filter: blur(0.5px);
  }
}

@keyframes blur {
  100% {
    transform: scale(1.3) translate(2%, -5%);
    filter: saturate(80%) drop-shadow(0 0 10px rgba(0, 0, 0, 0.25)) blur(5px);
  }
}