All About CSS Animation

https://www.kirupa.com/html5/all_about_css_animations.htm

by Avinashullal

HTML

<div id="mainContent">
  <img id="bigcloud" alt="#" class="cloud" height="154" src="//www.kirupa.com/images/bigCloud.png" width="238">
</div>

CSS

#mainContent {
  background-color: #A2BFCE;
  border-radius: 4px;
  padding: 10px;
  width: 600px;
  height: 300px;
  overflow: hidden;
}

.cloud {
  position: absolute;
}

#bigcloud {
  animation: bobble 2s infinite;
  margin-left: 100px;
  margin-top: 15px;
}

@keyframes bobble {
  0% {
    transform: translate3d(50px, 40px, 0px);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translate3d(50px, 50px, 0px);
    animation-timing-function: ease-out;
  }
  100%{
    transform: translate3d(50px, 40px, 0px)
  }
}