Edit in JSFiddle

<body><a href="#"><img src="http://goinkscape.com/wp-content/uploads/2015/07/twitter-logo-final.png" class="one"></a>

<a href="#"><img src="http://goinkscape.com/wp-content/uploads/2015/07/twitter-logo-final.png" class="two"></a>
</body>
.one {
   position: relative;
   text-align: center;
   margin: 0;
   height:40px;
   width:40px;
   font-size: 1.25em;
   font-family: 'Poiret One', cursive;
   color: rgb(255, 255, 255);
   animation: 2s ease-in 0s 1 one;
 }
 
 .two {
   position: relative;
   text-align: center;
   margin: 0;
   height:40px;
   width:40px;
   font-size: 1.25em;
   opacity:0;
   font-family: 'Poiret One', cursive;
   color: rgb(255, 255, 255);
   animation: 2s ease-in 0s 1 two;
 }

 @keyframes one {
  0% {
    bottom: -10vh;
    opacity: 0;
    left:0px;
  }
  25%
  {
    left:200px;
  }
  50%
  {
    left:0px;
  }
  75%
  {
    left:200px;
  }
  100% {
    left :0px;
    bottom: 0vh;
    opacity: 1;
  }
}
 
  @keyframes two {
   0% {
     bottom: 0vh;
     opacity: 1;
   }
   100% {
     bottom: -10vh;
     opacity: 0;
   }
 }