@keyframes animHorizontale {
0% { transform : translate(0,0)}
100% { transform : translate(380px,0) }
}
@keyframes animVerticale {
0% { transform : translate(0,0) }
100% { transform : translate(0,280px)}
}
#boite {
background-color: beige;
width:400px;
height: 300px;
}
#ligne {
animation : animVerticale 3s linear infinite alternate;
}
#balle {
width: 20px;
height: 20px;
background: radial-gradient(circle at 2px 2px, #f00, #600);
border-radius: 10px;
animation : animHorizontale 1.8s linear infinite alternate;
}
<div id="boite">
<div id="ligne">
<div id="balle"></div>
</div>
</div>