One quick example without too much explanation.
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="/index.css"> <title></title> </head> <body> <div id="parent"> <div id="container"> test </div> </div> </body> </html>
CSS:
#parent { margin: 0px auto 0px auto; width: 250px; overflow: hidden; } #container { position: relative; -webkit-animation-name: container; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 5s; } @-webkit-keyframes container { 0% { -webkit-transform: translateX(0); } 100% { -webkit-transform: translateX(800px); } }
Live example (Chrome only):
test