<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="container"> <div id='mover' class='dot'></div> <div id='origin' class='dot'></div> <div id='left' class='circle'></div> <div id='right' class='circle'></div> <div id='top' class='circle'></div> </div>

#container { width: 100vw; height: 100vh; } .dot { position: absolute; left: calc(50% - 10px); top: calc(50% - 10px); background-color: red; width: 20px; height: 20px; border-radius: 50px; } #mover { animation: pedal1 1s linear infinite; } .circle { position: absolute; left: calc(50% - 75px); top: calc(50% - 75px); width: 150px; height: 150px; border-radius: 150px; border: 1px solid blue; } #left { left: calc(50% - 75px - 50px); } #right { left: calc(50% - 75px + 50px); } #top { top: calc(50% - 120px + 100px); } /* arccos(50/75) = 48deg */ @keyframes pedal1 { 0% { transform: translateX(50px) rotate(48deg) translateX(-75px); } 50% { transform: translateX(50px) rotate(-48deg) translateX(-75px); } 51% { transform: translateX(-50px) rotate(48deg) translateX(75px); } 100% { transform: translateX(-50px) rotate(-48deg) translateX(75px); } }