一 实现背景图循环播放
@keyframes mlfly { 0%{ background-position:0 0; } 100%{ background-position:210px 0; } } .ele-man{ width:70px; position:absolute; top: 30px; left:50%; margin-left:-35px; background-image: url("m1-man.32@2x.png"); background-size:210px 163px; height:163px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; animation:mlfly .2s steps(3,start) .5s infinite alternate; } </style> </head> <body> <div class="ele-man"></div> </body>
实现火箭火苗动的效果 实际背景图有三个
通过循环播放三个背景图达到动画效果
原文：http://www.cnblogs.com/junwu/p/5455730.html