JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="container">
  <div class="cloud x1">
    <div class="letter"></div>
  </div>
  <div class="cloud">
    <div class="letter"></div>
  </div>
  <div class="cloud">
    <div class="letter"></div>
  </div>
  <div class="cloud">
    <div class="letter"></div>
  </div>
  <div class="cloud">
    <div class="letter"></div>
  </div>
</div>

CSS

@-webkit-keyframes moveclouds {
	0% {margin-top: 500px;}
	100% {margin-top: -500px;}
}

@-webkit-keyframes moveletter {
	0% {background-position: 0% 0%;}
	100% {background-position: 0% 135%;}
}

.container {
  margin: 0 auto;
  overflow: hidden;
  width: 200px;
  height: 500px;
}

.cloud {
	width: 200px;
  height: 60px;
  margin-bottom: 20px;
	background: #fff;
	
	position: relative; 
}

.letter {
	width: 100%;
  height: 100%;
  position: absolute;
  background-image: url('http://www.cprw.com/wp-content/uploads/2011/09/A.jpg');
  background-position: 0% 0%;
  background-size: cover;  
}

.x1 {
	-webkit-animation: moveclouds 8s linear infinite;
}

.letter {
	-webkit-animation: moveletter 8s linear infinite;
}