<html> <head> <style type="text/css"> .pad { display: block; height: 20px; } .out { display: block; position: absolute; transform-origin: 0 0; width: 100px; height: 50px; overflow: hidden; } .rect { width: 100px; height: 50px; background-color: grey; } .ani { animation: rot 200s linear infinite; animation-timing-function: steps(2, start); transform-origin: 50px 50px; } @keyframes rot { to { transform: translate(200px, 0px); } } </style> </head> <body> <div class="pad"></div> <div class="out ani"> <div class="rect"></div> </div> </body> </html>