CSS3 3D冲冲彩色文字动画实例及animation-fill-mode属性规则

　　CSS3制作动画（animation）的最后一个属性animation-fill-mode，用于设置动画之外的状态，即动画运动完之后的状态，主有两种，一种是动画返回起始位置，另一种是动画运动到那停到那。如果把动画设置为无限循环，无论怎么设置animation-fill-mode，都看不到效果。

　　animation-fill-mode的语法规则比较简单，以下是它的语法规则和一个具体的应用实例，实例展示的是3D冲冲彩色文字动画，文字向前冲的同时又向后缩回。

 

　　一、animation-fill-mode语法规则

　　animation-fill-mode：<single-animation-fill-mode>[, <single-animation-fill-mode> * ]

　　<single-animation-fill-mode> = none | forwards | backwards | both

 

　　二、语法说明

　　1、animation-fill-mode 可以设置多个动画之外的状态，默认值为none

　　A、animation-fill-mode 表示第一个动画之外的状态，不能省略；

　　B、[]中的 animation-fill-mode 表示第二个动画之外的状态，可以省略；

　　C、* 表示第三个、第四个、……第n个动画之外的状态，可以省略；

 

　　2、animation-fill-mode 取值如下：

　　none：为默认值，不设置对象动画之外的状态；

　　forwards：设置动画状态为结束时的状态，运动到那停到那；

　　backwards：设置动画状态为开始时的状态，动画播放完后返回原位置；

　　both：设置动画状态为结束或开始的状态。

 

　　三、animation-fill-mode 3D冲冲文字动画

　　以下是一个3D冲冲文字动画实例，文字一边向前冲，一边变色。效果图中共展示了三种，一种是无限循环，另一种是把动画之外的状态设置为forwards，第三为把动画之外的状态设置为backwards。

　　html代码：

　　<div class="div"><h3>CSS3 3D冲冲文字动画</h3></div>

　　CSS代码：

　　<style type="text/css">
.div{position:relative;overflow:hidden;width:600px;height:200px;font-size:16px;border:1px solid #ab9595;background-color:#e3e2e0;padding:8px;}

.div h3{animation:text-animation 2s ease-out infinite forwards;}

.div h3:hover{animation-play-state:paused;}

 

@keyframes text-animation{
0%{transform:translate(0, 0); opacity:0;}
5%{transform:rotate3d(20px,20px,20px,-179deg);opacity:0.25;}
10%{transform:rotate3d(50px,50px,50px,179deg);opacity:0.5; font-size:22px;}
15%{transform:rotate3d(20px,20px,20px,-179deg);opacity:1; font-size:52px;}
20%{transform:rotate3d(50px,50px,50px,179deg);opacity:1; font-size:52px;}
25%{transform:rotate3d(20px,20px,20px,-179deg);opacity:1; font-size:52px;}
27%{transform:rotate3d(50px,50px,50px,179deg);opacity:0.5; font-size:22px; color:Yellow;}
30%{transform:rotate3d(20px,20px,20px,-179deg);opacity:0.25; color:Green;}
32%{transform:rotate3d(20px,20px,20px,179deg);opacity:1; font-size:52px; color:#0789db;}
25%{transform:rotate3d(20px,20px,20px,-179deg);opacity:0.5; font-size:22px; color:Red;}
37%{transform:rotate3d(20px,20px,20px,179deg);opacity:0.75; font-size:22px; color:#10e21a;}
40%{transform:rotate3d(20px,20px,20px,-179deg);opacity:1; font-size:52px; color:#03aa59;}
45%{transform:rotate3d(20px,20px,20px,179deg);opacity:1; font-size:52px; color:#ffff00;}
50%{transform:rotate3d(20px,20px,20px,-179deg);opacity:1; font-size:52px; color:#39ae5d;}
55%{transform:rotate3d(20px,20px,20px,179deg);opacity:1; font-size:52px; color:#a8ef53;}
60%{transform:translate(26px, 100px);opacity:1; font-size:52px;color:#f461a2;}
100%{transform:translate(26px, 70px);font-size:52px;opacity:1; color:#f0318b;}

}
　　</style>

　　效果图：

 

　　效果图（forwards）：

 

　　效果图（backwards）：