CSS3 animation小动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{
padding: 0;
margin: 0;
}
.btn{
width: 200px;
text-align: center;
}
.test{
width: 90px;
height: 60px;
background: url(img/test.png) no-repeat;
margin: 60px;
/*-webkit-animation: run 350ms steps(1) infinite 0s;*/
-webkit-animation: run 350ms steps(5) infinite 0s;
}
/*@-webkit-keyframes run{
0%{
background-position: 0;
}
20%{
background-position: -90px 0;
}
40%{
background-position: -180px 0;
}
60%{
background-position: -270px 0;
}
80%{
background-position: -360px 0;
}
100%{
background-position: -450px 0;
}
}*/
@-webkit-keyframes run{
100%{
background-position: -450px 0;
}
}
</style>
<script>
var speed =350;
var flag = true;
function fast(){
var obj = document.getElementById('flash');
speed-=10;
// console.log(obj.style.webkitAnimation) //为何获取不到？？？？？？
obj.style.webkitAnimation = " run "+speed+"ms steps(5) infinite 0s"
}
function slow(){
var obj = document.getElementById('flash');
speed+=10;
// console.log(obj.style.webkitAnimation) //为何获取不到？？？？？？
obj.style.webkitAnimation = " run "+speed+"ms steps(5) infinite 0s"
}
function play(){
var obj = document.getElementById('flash');
flag = !flag;
obj.style.webkitAnimationPlayState = flag ? "running" : "paused";
}
</script>
</head>
<body>
<div id='flash' class="test"></div>
<div class="btn"><button onclick="fast()">跑快点</button> <button onclick="slow()">跑慢点</button> <button onclick="play()">暂停/开始</button></div>
</body>
</html>
效果图
