animation-fill-mode : none | forwards | backwards | both
none：不改变默认行为。
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。
扩展资料：
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性，这也让跨浏览器开发变得复杂。
参考资料：百度百科-CSS3
css3中停止动画的方法，有需要的朋友可以参考下。之前写了一个a标签，设置了css3无限循环的动画效果，但是后来加上伪类hover的时候发现动画依然在继续，伪类的效果根本显示不出来。然后去百度了一下，看着大多数都是用js进行动画的停止操作的，但是本人很懒，不喜欢为了一个动画去写js，就准备在css3上想想办法，把动画停止了。
1、首先给大家看看一个动画代码：（不是什么高大上的效果，只是简单的颜色变化）
@-webkit-keyframes indexframe
{
0% {background-color:#000000color:#FFFFFF}
50% {background-color:#FFFFFFcolor:#000000}
100% {background-color:#000000color:#FFFFFF}
}
#index_href
{
-webkit-animation: indexframe 8s infinite
display:block
position:relative
top:400px
left:180px
width:200px
height:80px
border-radius:15px
text-align:center
line-height:80px
font-style:italic
font-size:24px
text-decoration:none
color:#FFFFFF
background-color:#000000
opacity:0.5
}
为了方便，也就写了兼容chrome的css3样式，其他的换个前缀就好，在这里就不过多的说了。
2、为这个a（id=“index_href”）添加一个伪类：
这是原本准备添加的：
#index_href:hover
{
background-color:#ffffff
color:#000000
opacity:0.5
}
但是运行之后发现动画因为设置的是infinite//无限循环的效果
所以当需要触发伪类的效果时，动画还是会依然进行，这时候就需要停止之前的无限循环的动画了。
用css3的思路就是重新设置一个伪类的动画，把前面的动画给覆盖了。这样的话，我们就可以把伪类要改变的东西设置为动画效果，然后直接覆盖上去就行了。代码如下：
#index_href:hover
{
-webkit-animation:indexend 0s
color:#000000
opacity:0.5
}
@-webkit-keyframes indexend
{
0% {background:#000000}
100% {background:#FFFFFF}
}
这里重新定义一个动画，命名为indexend，然后添加到hover伪类中去，设置动画的过渡时间为0s，这样可以达到瞬间变道动画的结束样式，以达到hover样式的直接改变。
这样就成功的实现了之前动画的停止与后来样式的变化。
