HTML动画（难点）
浏览数：39 /
时间：2015年06月09日
- animation-delay
这个属性是规定动画开始前等待几秒才开始。本来是很好理解的，但是当时就有个疑问：假如我的动画是连续执行好多次的情况下的话，是第一次执行前才会延迟还是每次执行前都会延迟呢？答案是：只有第一次会。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>delay</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
@-webkit-keyframes delay{
99%{
-webkit-transform:translate(100px,0);
}
}
.delay{
width:100px;height:100px;
background-color: #000;
-webkit-animation:delay 1s linear 2s infinite;
animation:delay 1s linear 2s infinite;
}
</style>
</head>
<body>
<div class="delay"></div>
</body>
</html>
animation-fill-mode
该属性有四个值
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
一开始比较纠结着三个到底有什么区别。网上也找了，发现网上说的有点错误。起码我试了一下forwards和both的效果是一模一样的。都是动画运行完了停在哪里就是哪里。至于backwards，就是总停在一开始的状态。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>delay</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
@-webkit-keyframes delay{
100%{
-webkit-transform:translate(100px,0);
}
}
.delay{
width:100px;height:100px;
background-color: #000;
-webkit-animation:delay 1s linear 2 forwards alternate;
}
</style>
</head>
<body>
<div class="delay"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>delay</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
@-webkit-keyframes delay{
100%{
-webkit-transform:translate(100px,0);
}
}
.delay{
width:100px;height:100px;
background-color: #000;
-webkit-animation:delay 1s linear 2 both alternate;
}
</style>
</head>
<body>
<div class="delay"></div>
</body>
</html>
-
两段代码主要说明在forwards和both的情况下动画在设置了反向运行偶次数时，效果仍然一样。因为之前看到网上说的是forwards在偶次数反向是会停在关键帧的100%处，而不是0%处。
- iteration-count
运行次数。
这个本来没什么好说的，一目了然，但是无意中发现，有以下的特殊情况：
不能为负数
可以为0 为0的时候，按1来算
可以为小数 小数的时候，不会取整。而是多少就运行多少，比如 .5 就运行到50%的位置。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
