<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3的transition动画效果</title> <style> /* .box{ width: 200px; height: 200px; background-color: gold; transition: width 500ms ease,height 600ms ease,background-color 500ms ease ; } .box:hover{ width: 1000px; height: 1000px; background-color: red; }*/ @keyframes walk { from{ left: 0px } to{ left: -754px; } } .box{ width: 66px; height: 218px; border: 1px solid #ddd; margin: 50px auto 0; overflow: hidden; position: relative; } .box img{ position: absolute; left: 0; right: 0; animation: walk 1s steps(9) infinite; } </style> </head> <body> <div class="box"> <img src="walking.png" alt=""> </div> </body> </html>