@keyframes animBarre {
0% { transform : rotate(0deg)}
100% { transform : rotate(180deg) }
}
@keyframes animGlobal {
0% { transform : translate(-100px) }
50% { transform : translate(100px) }
100% { transform : translate(-100px)}
}
#global {
margin:auto;
animation : animGlobal 10s ease infinite;
}
#barre {
width: 120px;
height: 10px;
background: radial-gradient(circle, black, black 3px, red 3px, red);
animation : animBarre 2s linear infinite;
}
<div id="global">
<div id="barre"></div>
</div>