CSS3中设置动画时间外属性
03/23
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：
属性值 |
效果 |
none |
默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 |
forwards |
表示动画在结束后继续应用最后的关键帧的位置 |
backwards |
会在向元素应用动画样式时迅速应用动画的初始帧 |
both |
元素动画同时具有forwards和backwards效果 |
在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。
例如：让动画停在最一帧处。代码如下：
animation-fill-mode:forwards;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
@keyframes redToBlue{
from{
background: red;
}
20%{
background:green;
}
40%{
background:lime;
}
60%{
background:yellow;
}
to{
background:blue;
}
}
div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
animation-name:redToBlue;
animation-duration: 5s;
animation-timing-function: ease;
animation-delay: .1s;
animatino-fill-mode: both;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
版权属于：
Dcr163的博客
本文链接：
https://www.dcr163.cn/154.html（转载时请注明本文出处及文章链接）
