Настройка анимации (срочно)

[aqua.77]

Как настроить анимацию так, чтобы элементы плавно плыли по течению. Думаю проблема в процентный значениях между кадрами. Вот песок: https://jsfiddle.net/8awkpysn/1/ И собственно код. 

<p class="q1"></p>
<p class="q2"></p>

.q1{
  position:absolute;
  left:0px;
  width:100px;
  height:80px;
  background:black;
  animation: c1 5s linear infinite; 
}
.q2{
  position:absolute;
  left:110px;
  width:100px;
  height:100px;
  background:black;
  animation: c2 5s linear infinite;
}

@keyframes c1 {
   15%{
	   left:-252px;
   }
   15.1%{
		left:450px;
   }
 }
@keyframes c2 {
   15%{
	   left:-252px;
   }
   15.1%{
		left:560px;
   }
   to{
	   left:110px;
   }
}