JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<div class="photo"></div>

CSS

html, body{
  margin: 0;
  height: 100vh;
}

.photo{
  position: relative;
  height: 100%;
  overflow: hidden;
}

.photo:before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  
  z-index: -1;
  background-image: url(http://hdqwalls.com/wallpapers/goose-the-cat-in-captain-marvel-p8.jpg);
  background-position: center -50px;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  
  /*animation: 1s zoom both reverse;/* zoom out */
  /*animation: 1s zoom both alternate;/* zoom in */
  animation: 99s zoom infinite alternate;/* zoom in and out infinite or number */
  animation-delay: 3s;
  
  /*animation: 1s move both reverse;/* left to right */
  /*animation: 1s move both alternate;/* right to left */
  /*animation: 50s move infinite alternate;/* infinite right to left */
}

@keyframes zoom {
  0%{transform: scale(1)}
  100%{transform: rotate(-4deg) scale(1.5)}  
}

@keyframes move {
  0%{transform: scale(1.3)}
  100%{transform: scale(1.4) translateX(14%)}  
}