1、animation-name ：动画名
2、animation-duration：时间
3、animation-delay：延时
4、animation-iteration-count：次数
5、 animation-direction：方向
6、 animation-play-state：控制
7、 animation-fill-mode：状态
8、 animation-timing-function：关键帧变化
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>圣诞主题</title>
<style type="text/css">
.bird {
min- 91px;
min-height: 71px;
top: 10%;
position: absolute;
z-index: 10;
background: url(http://img.mukewang.com/55ade1700001b38302730071.png)
}
.birdFly {
/*写法1*/
-moz-animation: bird-slow 400ms steps(1,start) infinite;
/*写法2*/
-webkit-animation-name: bird-slow;
-webkit-animation-duration: 400ms;
-webkit-animation-timing-function: steps(3);
-webkit-animation-iteration-count: infinite;
}
/*???*/
@keyframes bird-slow {
0% {background-position-x: -0px}
100% {background-position-x: -273px}
}
</style>
</head>
<body>
steps(3)实现帧动画
<div class="bird birdFly"></div>
</body>
<script type="text/javascript">
var docEl = document.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
//设置根字体大小
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
};
//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>
</html>