Untitled

<!DOCTYPE html>

<html>

<head>
 <title>Bouncing Clouds</title>
 <style>
 .container{
 background-color: #A2BFCE;
 width: auto;
 height: 300px;
}
 #bigcloud {
 margin-left: 500px;
 margin-top: 15px;
animation-name: bobble;
animation-duration:2s;
animation-iteration-count:infinite;
animation-timing-function:linear;
 }
 @keyframes bobble {
0% { transform: translate3d(50px, 40px, 0px); 
}
50% { transform: translate3d(50px, 50px, 0px);
}
100% { transform: translate3d(50px, 40px, 0px);
}
}
 </style>
</head>
<body>
 <div class="container">
 <img id="bigcloud" height="154" width="238" src="cloud.png">
 </div>
</body>
</html>
Output
Editor is loading...