SOURCE

<div class='ball'></div>

.ball{
  width:50px;
  height:50px;
  border-radius:50%;
  background:yellowgreen;
  animation:fall 3s cubic-bezier(.755,.05,.855,06);
}
@keyframes fall{
  60%,80%,to {transform:translateY(250px);
              animation-timing-function:cubic-bezier(.215,.61,.355,1)}
  70%{transform:tranlateY(150px);}
  90%{transform:translateY(210px)}
}
@keyframes input-grow{
  from {transform:scale(0)}
  70%{transform:scale(1.1);
      animation-timing-function:cubic-bezier(.1,.25,1,.25)
  }
}
input:not(:focus) + .callout{
  transform:scale(0);
  animation:input-grow .5s;
}
.callout{
  margin-left:5em;
  width:30em;
  display:block;
  text-align:center;
  border:.1em solid #ccc;
  border-radius:0.5em;
  background:orange;
  padding:.5em;
  transform-origin:1.4em -.4em;
}