码迷,mamicode.com
首页 > Web开发 > 详细

css 动画

时间:2018-11-10 01:01:50      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:webkit   infinite   alternate   star   src   ack   lan   lang   nsf   

<!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 动画

标签:webkit   infinite   alternate   star   src   ack   lan   lang   nsf   

原文地址:https://www.cnblogs.com/geekjsp/p/9937761.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!