CSS for animating picture Loops (code)

This article gives you the content is about CSS implementation of the picture Loop animation effect (code), there is a certain reference value, the need for friends can refer to, I hope to help you.

<style>*{margin:0;padding:0;}. robot{width:167px;    height:191px;    Background:url (robot.png) No-repeat;position:absolute;left:0px;top:20px;animation:robotmove 10s linear Infinite;} /* loop Over/@keyframes Robotmove{0%{}49%{transform:rotatey (0deg);} /* Protect the front 49% images from flipping */50%{left:1000px in the middle; Transform:rotatey (180deg);} /*49%-50% picture Flip */100%{left:0px; Transform:rotatey (180deg);} /* Protection after 50% is flipped 180 degrees of shape */}/* has a direction, no flip */@keyframes robotmove2{0%{}100%{left:1100px;}} /* Compatible with front plus-webkit*/</style>