您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 animation-fill-mode

2018-9-6 00:22| 作者: admin| 查看: 833| 评论: 0|来自: 蚂蚁部落

animation-fill-mode属性设置元素动画时间之外的状态。

如果提供多个属性值,以逗号进行分隔。

语法结构:

[CSS] 纯文本查看 复制代码
animation-fill-mode : none | forwards | backwards | both;

参数解析:

(1).none:不改变默认行为。

(2).forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

(3).backwards:设置对象状态为动画开始时的状态。

(4).both:设置对象状态为动画结束或开始的状态。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style>
h1{font-size:16px;}
li{
  padding:10px;
  list-style:none;
}
span{
  display:block;
  width:80px;
  height:80px;
  padding:10px;
  border-radius:50px;
  box-shadow:0 0 10px rgba(204,102,0,.8);
  background:#F6D66E;
  background:-moz-linear-gradient(top,#fff,#F6D66E);
  background:-webkit-linear-gradient(top,#fff,#F6D66E);
  background:linear-gradient(top,#fff,#F6D66E);
}
 
.none span{
  -moz-animation:animations 1s ease;
  -webkit-animation:animations 1s ease;
  animation:animations 1s ease;
}
@-webkit-keyframes animations{
  0%{-webkit-transform:translate(0,0);}
  100%{-webkit-transform:translate(400px);}
}
@-moz-keyframes animations{
  0%{-moz-transform:translate(0,0);}
  100%{-moz-transform:translate(400px);}
}
@keyframes animations{
  0%{transform:translate(0,0);}
  100%{transform:translate(400px);}
}
 
.forwards span{
  -moz-animation:animations2 1s ease forwards;
  -webkit-animation:animations2 1s ease forwards;
  animation:animations2 1s ease forwards;
}
@-webkit-keyframes animations2{
  0%{-webkit-transform:translate(0,0);}
  100%{-webkit-transform:translate(400px);}
}
@-moz-keyframes animations2{
  0%{-moz-transform:translate(0,0);}
  100%{-moz-transform:translate(400px);}
}
@keyframes animations2{
  0%{transform:translate(0,0);}
  100%{transform:translate(400px);}
}
 
.backwards span{
  -moz-animation:animations3 1s ease backwards;
  -webkit-animation:animations3 1s ease backwards;
  animation:animations3 1s ease backwards;
}
@-webkit-keyframes animations3{
  0%{-webkit-transform:translate(0,0);}
  100%{-webkit-transform:translate(400px);}
}
@-moz-keyframes animations3{
  0%{-moz-transform:translate(0,0);}
  100%{-moz-transform:translate(400px);}
}
@keyframes animations3{
  0%{transform:translate(0,0);}
  100%{transform:translate(400px);}
}
 
.both span{
  -moz-animation:animations4 1s ease both;
  -webkit-animation:animations4 1s ease both;
  animation:animations4 1s ease both;
}
@-webkit-keyframes animations4{
  0%{-webkit-transform:translate(0,0);}
  100%{-webkit-transform:translate(400px);}
}
@-moz-keyframes animations4{
  0%{-moz-transform:translate(0,0);}
  100%{-moz-transform:translate(400px);}
}
@keyframes animations4{
  0%{transform:translate(0,0);}
  100%{transform:translate(400px);}
}
</style>
</head>
<body>
<ul>
  <li class="none">
    <strong>none:</strong>
    <span></span>
  </li>
  <li class="forwards">
    <strong>forwards:</strong>
    <span></span>
  </li>
  <li class="backwards">
    <strong>backwards:</strong>
    <span></span>
  </li>
  <li class="both">
    <strong>both:</strong>
    <span></span>
  </li>
</ul>
</body>
</html>

上面的代码演示了animation-fill-mode四个属性值的效果,下面再做一下简单介绍:

(1).none:默认情况下,动画完成就会复位,当属性值为none的时候,元素自然回到原始位置。

(2).forwards:元素会最终停留在动画的最后一帧的位置。

(3).backwards:元素会在动画完成后,回到动画第一帧的位置。

(4).both:有点"随遇而安"的感觉,最后一帧或者第一帧都会被应用,也就是动画在什么时候结束,就停留在什么位置。

下面单独看一个关于both属性值的代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
div{
  width:100px;
  height:100px;
  background:green;
  position:relative; 
   
  animation:theanimation 5s both; 
  -webkit-animation:theanimation 5s both; 
   
  animation-direction:alternate;
  -webkit-animation-direction:alternate;
   
  animation-iteration-count:3;
  -webkit-animation-iteration-count:3;
   
}
 
@keyframes theanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-webkit-keyframes theanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的代码演示了both属性值的功能。

大家可以自行修改一下animation-iteration-count属性值,以便观看效果。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部