<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
???<style type="text/css">
???????.test{
???????????background-image:url("man.png");
???????????width:70px;
???????????height:163px;
???????????-webkit-animation-timing-function:steps(3,start);
????????????animation-timing-function:steps(3,start);
???????????-webkit-animation-duration:.2s;
???????????animation-duration:.2s;
???????????-webkit-animation-name:m1fly;
???????????animation-name:m1fly;
???????????-webkit-animation-delay:.5s;
???????????animation-delay:.5s;
???????????animation-iteration-count:infinite;
????????????-webkit-animation-iteration-count:infinite;
????????????animation-direction:alternate;
????????????-webkit-animation-direction:alternate;
???????????transform-style:preserve-3d;
???????}
???????@-webkit-keyframes m1fly {
???????????0% {
???????????????background-position: 0 0
???????????}
???????????100% {
???????????????background-position: 210px 0
???????????}
???????}
???????@keyframes m1fly {
???????????0% {
???????????????background-position: 0 0
???????????}
???????????100% {
???????????????background-position: 210px 0
???????????}
???????}
???</style>
</head>
<body>
???<div class="test">
???</div>
</body>
</html>
man.png
css 动画
原文地址：https://www.cnblogs.com/geekjsp/p/9937761.html