帧动画练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="css/animate.min.css" />
</head>
<body>
<style>
div{
width: 100px;
height: 100px;
animation: myPic .5s;
animation-iteration-count:infinite;
border-bottom: 2px solid #000;
}
@keyframes myPic{
0%{background: url(img/1.png) no-repeat center;background-size: 100% 100%;}
20%{background: url(img/2.png) no-repeat center;background-size: 100% 100%;}
40%{background: url(img/3.png) no-repeat center;background-size: 100% 100%;}
60%{background: url(img/4.png) no-repeat center;background-size: 100% 100%;}
80%{background: url(img/5.png) no-repeat center;background-size: 100% 100%;}
100%{background: url(img/6.png) no-repeat center;background-size: 100% 100%;}
}
</style>
<div>
</div>
</body>
</html>
