JSFiddle - React, Tailwind, and code Playground

by bill_q

HTML

<div class="animate-area2"></div>

CSS

@keyframes animatedClouds {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
@keyframes animatedFrog {
    from { background-position: 30px 80px; }
    to { background-position: 30px 20px; }
}
@keyframes animatedBird {
    from { background-position: 20px 20px; }
    to { background-position: 300px -90px; }
}

.animate-area2  { 
    width: 560px; 
    height: 190px; 
    overflow: hidden;
    background-image: 
    url(http://davidwalsh.name/demo/bg-clouds.png);
    background-position: 0px 0px;
    background-repeat: repeat-x;
    animation: animatedClouds 4s linear infinite;
}
.animate-area2:before {
    content:'';
  width: 560px; 
    height: 190px; 
  background-image:url(http://davidwalsh.name/wp-content/themes/jack/images/treehouseFrog.png);
    background-position: 30px 80px;
    background-repeat: no-repeat;
    animation: animatedFrog 8s linear infinite;
  position:absolute;
}
.animate-area2:after {
    content:'';
  width: 560px; 
    height: 190px; 
  background-image: 
    url(http://davidwalsh.name/demo/twitter-logo-bird.png);
    background-position: 20px -90px;
    background-repeat: no-repeat;
  position:absolute;
    animation: animatedBird 2s linear infinite;
}