JSFiddle - React, Tailwind, and code Playground

by Mario Winkler

HTML

<div class="theimg"></div>
<div class="overlay"></div>

CSS

.overlay {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 200px;
  border-radius: 100px;  
  box-shadow: 0 0 0 0 rgba(0,0,0,0.5) inset, 0 0 0 1000px rgba(0,0,0,0.5)
}

.theimg {
    content: url("http://placekitten.com/300/300");
	position: absolute;
	top: 0px;	
	left: 0px;
	height: 300px;
	width: 300px;
	-webkit-animation: composite 5s infinite alternate;
	border: solid 1px black;
}



/* taken from http://daneden.github.io/animate.css/ */
.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
@-webkit-keyframes bounceIn {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
 
  30% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
 
  60% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }
 
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
 
@keyframes bounceIn {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
 
  30% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }
 
  60% {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
  }
 
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
 
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

JavaScript

$(function() {
setInterval(function() {
  $(".overlay").toggleClass("bounceIn animated");
}, 3000);
  
});