<link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
<div class="start.party"></div>
<div class="transition"><p>Weee!</p></div>

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;

}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
   }

   100% {
      bottom: 0;
      left: 140px;
      background: #f00;
   }
}