CSS Aniamation using @keyframe

CSS Aniamation using @keyframe

by Abid Shaik

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div id="mainDiv">
  <div class="smallBox smallBox1"> </div>
  <div class="smallBox smallBox2"> </div>
  <div class="smallBox smallBox3"> </div>
</div>
<div id="SpriteAnimation">
</div>
<div id="sky">
  <div id="cloud1">
    <img class="cldImg" src="http://www.textures4photoshop.com/tex/thumbs/blue-cloud-PNG-transparent-thumb26.png" alt="Cloud 1" />
  </div>
  <div id="cloud2">
    <img class="cldImg" src="http://www.textures4photoshop.com/tex/thumbs/blue-cloud-PNG-transparent-thumb26.png" alt="Cloud 2" />
  </div>
  <div id="cloud3">
    <img class="cldImg" src="http://www.textures4photoshop.com/tex/thumbs/blue-cloud-PNG-transparent-thumb26.png" alt="Cloud 1" />
  </div>
</div>

CSS

#mainDiv{
	display: flex; 
  align-content: center; 
  align-items: center; 
  background-color: #DDD; 
}
.smallBox{
width: 100px; 
height: 100px; 
margin: 5px; 
}

.smallBox1{
background-color: red; 
}
.smallBox2{
background-color: yellow; 
}
.smallBox3{
background-color: #9090e5; 
}

/*Step1: Create the KeyFrame Animation with from{} and to {}*/
@keyframes keyFrameName {
	from {transform: translateX(0);}
	to{transform: translateX(900px);}
}

@keyframes Move-Left-Right {
	0% {transform: translateX(0);}
	50%{transform: translateX(200px) rotate(45deg);}
	100%{transform: r(200px);}
}

@keyframes turnIt{
	100%{transform: rotate(1turn); }
}

/*Step2: Assign amimation and props to the HTML element */
.smallBox1{
	animation-name: keyFrameName; 
	animation-delay: 1s; 
	animation-duration: 5s; 
	animation-timing-function: ease-in;
	animation-iteration-count: 2; 
}
.smallBox2{
	/*Short hand notation */
	animation: Move-Left-Right 1s 2s 2; 
}
.smallBox3{
	animation: turnIt 5s linear infinite; 
	animation-play-state:running; 
}
.smallBox3:hover{
	animation-play-state:paused; 
}

#sky{
	display: flex; 
	height: 400px; 
	background-color: #9090e5; 
}
#cloud1{
	width: 300px; 
	height: 300px; 
	position: absolute;
	animation: cloud-drift 25s linear infinite ;

}
#cloud2{
	width: 300px; 
	height: 300px; 
	position: absolute;
	top:30px;
animation: cloud-drift 35s 5s linear infinite backwards;
}
#cloud3{
	width: 300px; 
	height: 300px; 
	position: absolute;
	animation: rotateCloud 25s linear infinite backwards;

}
.cldImg{
		object-fit:contain;
		width:100%;
}

@-webkit-keyframes cloud-drift{
	from{transform: translateX(-400px); }
	to{ transform: translateX(1300px);}
}
@-webkit-keyframes rotateCloud{
	from{ transform: rotate(45deg); width: 500px;}
	to{ transform: rotate(90deg); width: 300px;}
}

#SpriteAnimation{
	width: 256px; 
	height: 256px;
	display: block;
	/*The whole sprite image is 153px wide and 256px tall. Each image is in 256 X 256 total 6 images */
	background:...