@keyframes rotation {
  from {
      -webkit-transform: rotate(0deg);
  }
  to {
      -webkit-transform: rotate(359deg);
  }
}


@keyframes translatep1{
  0%{
    transform: translateY(35px);
  }

  100%{
    transform: translateY(5px);
    visibility: hidden;
  }
}

@keyframes translatep2{
  0%{
    transform: translateY(-20px);
  }

  100%{
    transform: translateY(40px);
    visibility: hidden;
  }
}

@keyframes translateright{
  0%{
    right: -50px;
    color: transparent;
    display: none;
  }

  30%{
    right: 150px;
    color: transparent;
    display: block;
  }

  100%{
    right: 200px;
    color: white;
  }
}

@keyframes translateleft{
  0%{
    right: 200px;
    color: white;
    display: block;
  }
  30%{
    right: 150px;
    color: transparent;
  }

  100%{
    right: -200px;
    color: transparent;
    display: none;
  }
}