JSFiddle - React, Tailwind, and code Playground

by Francesca Haselden

HTML

<img src="http://png-1.findicons.com/files/icons/2015/24x24_free_application/24/heart.png" alt="Heart" />
<img src="http://png-1.findicons.com/files/icons/2015/24x24_free_application/24/heart.png" alt="Heart" />
<img src="http://png-1.findicons.com/files/icons/2015/24x24_free_application/24/heart.png" alt="Heart" />
<img src="http://png-1.findicons.com/files/icons/2015/24x24_free_application/24/heart.png" alt="Heart" />

CSS

@-webkit-keyframes heartbounce {
  0%, 100% {
    top:0;
  }
  50% {
    top:-10px;
  }
}


img:first-child {
 -webkit-animation-name: heartbounce;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease;
 -webkit-animation-delay: 1s;
}
img:nth-child(2) {
 -webkit-animation-name: heartbounce;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease;
 -webkit-animation-delay: 1.2s;
}
img:nth-child(3) {
 -webkit-animation-name: heartbounce;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease;
 -webkit-animation-delay: 1.4s;
}
img:last-child {
 -webkit-animation-name: heartbounce;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease;
 -webkit-animation-delay: 1.6s;
}



/* Bits just for JS Fiddle example */
body{padding-top:50px}
img{position:relative;}