CSS3 转圈彩色文字动画实例及animation-play-state属性规则

　　网页中的动画通常是当鼠标移到上面，动画立即停止，便于用户阅读；CSS3新增的制作动画属性也考虑到这个问题，只要作了相应的设置，鼠标移到上面，动画也会停止，移开鼠标，动画继续运动；这主要通过animation-play-state属性来控制。

　　animation-play-state只有两个取值，一个控制动画运动，另一个控制动画停止；具体怎么设置看下面的语法规则，至于如何应用，看文章最后的转圈彩色文字动画实例。

 

　　一、animation-play-state语法规则

　　animation-play-state：<single-animation-play-state>[, <single-animation-play-state> * ]

　　<single-animation-play-state> = running | paused

 

　　二、语法说明

　　1、animation-play-state 可以设置多个动画状态，默认值为running

　　A、animation-play-state 表示第一个动画状态，不能省略；

　　B、[]中的 animation-play-state 表示第二个动画状态，可以省略；

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

 

　　2、animation-play-state 取值如下：

　　running：运动；

　　paused：暂停。

 

　　三、animation-play-state转圈彩色文字动画实例

　　以下是一个转圈彩色文字动画实例，文字一边正反转圈，一边变色，最后落下再慢慢升起，呈现转圈彩色文字效果。实例中设置了动画暂停，只要把鼠标移到上面，快速转动的文字就会停下来。

　　html代码：

　　<div class="div"><h3>CSS3转圈彩色文字动画</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:rotate(-179deg);opacity:0.25;}
10%{transform:rotate(179deg);opacity:0.5; font-size:22px;}
15%{transform:rotate(-179deg);opacity:1; font-size:52px;}
20%{transform:rotate(179deg);opacity:1; font-size:52px;}
25%{transform:rotate(-179deg);opacity:1; font-size:52px;}
27%{transform:rotate(179deg);opacity:0.5; font-size:22px; color:Yellow;}
30%{transform:rotate(-179deg);opacity:0.25; color:Green; }
32%{transform:rotate(179deg);opacity:1; font-size:52px; color:#0789db;}
25%{transform:rotate(-179deg);opacity:0.5; font-size:22px; color:Red;}
37%{transform:rotate(179deg);opacity:0.75; font-size:22px; color:#10e21a;}
40%{transform:rotate(-179deg);opacity:1; font-size:52px; color:#03aa59;}

45%{transform:rotate(179deg);opacity:1; font-size:52px; color:#ffff00;}
50%{transform:rotate(-179deg);opacity:1; font-size:52px; color:#39ae5d;}
55%{transform:rotate(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:#f713a9;}

}
　　</style>

　　效果图：