creo quesería con absolut, para que puedas manipularlas perfectamente
un ejemplo burdo sería este que acabo de hacer:
pruebalo, pero solo funciona en navegadores que usen css3.
no es un choque ni nada, solo animé dos bolas.
otra forma sería con js
Código HTML:
Ver original<!DOCTYPE html>
#caja{
position:relative;
width:100%;
}
#bola1{
animation:choquebola1 5s infinite;
padding:30px;
border-radius:50%;
background:red;
position: absolute;
left:0;
}
#bola2{
animation:choquebola2 5s infinite;
padding:30px;
border-radius:50%;
background:blue;
position:absolute;
right:0
}
@keyframes choquebola1{
from{left:0%;}
to{left:50%;}
}
@keyframes choquebola2{
from{right:0%;}
to{right:50%;}
}