@keyframes long {
  0% {
      width: 0
  }

  25% {
      width: 25%
  }

  50% {
      width: 100%
  }

  75% {
      width: 25%
  }

  to {
      width: 0
  }
}
 
@keyframes rightFloat {
    from {
        transform: translateX(-20px);
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
}

    to {
        transform: translateX(0);
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
}
}

 

@keyframes topFloat {
    from {
        transform: translateY(20px);
        opacity: 0;
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
        -o-transform: translateY(20px);
}

    to {
        transform: translateX(0);
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
}
}