<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta name="format-detection"content="telephone=no"> <title>demoCss3-3</title> <style> #animbg{ width:120px; height:120px; position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -60px; overflow: hidden; } #anim{-webkit-animation: auto-circle 0.5s step-end infinite;;} @-webkit-keyframes auto-circle{ 0%{-webkit-transform:translate3d(0,0,0);} 20%{-webkit-transform:translate3d(-120px,0,0);} 40%{-webkit-transform:translate3d(-240px,0,0);} 60%{-webkit-transform:translate3d(-360px,0,0);} 80%{-webkit-transform:translate3d(-480px,0,0);} 100%{-webkit-transform:translate3d(-600px,0,0);} } </style> </head> <body> <div id="animbg"> <img id="anim" src="images/anim.png"></div> </div> </body> </html>
更高效的方法：
#anim{-webkit-animation: auto-circle 0.5s steps(6) infinite;;} @-webkit-keyframes auto-circle{ 0%{-webkit-transform:translate3d(0,0,0);} 100%{-webkit-transform:translate3d(-720px,0,0);} }
更好的自适应效果和方法：
.ideal-people img { height: 100%; width: auto; -webkit-animation: idealLoop 4s steps(15) infinite; } @-webkit-keyframes idealLoop { 0% { -webkit-transform: translateX(0); } 100% { -webkit-transform: translateX(-100%); } }
