<div class="landscape"></div>
<div class="glass"></div>

:root {
  --duration: 2s;
  --pause: 2s;
}
.landscape, .glass {
  position: absolute;
  width: 100%;
  height: 100%;
}
@keyframes eye-focus {
  0% {
    -webkit-filter: blur(0);
  }
  100% {
    -webkit-filter: blur(10px);
  }
}
@keyframes focus-shift {
  0% {
    transform: scale(1)
  }
  100% {
    transform: scale(1.01)
  }
}
.landscape {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/54046/rainy_landscape.jpeg);
  background-size: cover;
  background-position: center;
  filter: blur(1rem);
  animation: eye-focus   var(--duration) ease-in infinite alternate, 
             focus-shift var(--duration) ease-in infinite alternate;
}
.glass {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/54046/glass_droplets.jpeg);
  filter: blur(0);
  animation: eye-focus   var(--duration) ease-in var(--pause) infinite alternate, 
             focus-shift var(--duration) ease-in var(--pause) infinite alternate;
  opacity: 0.5;
}

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}