网页中的动画通常是当鼠标移到上面，动画立即停止，便于用户阅读；CSS3新增的制作动画属性也考虑到这个问题，只要作了相应的设置，鼠标移到上面，动画也会停止，移开鼠标，动画继续运动；这主要通过animation-play-state属性来控制。
animation-play-state只有两个取值，一个控制动画运动，另一个控制动画停止；具体怎么设置看下面的语法规则，至于如何应用，看文章最后的转圈彩色文字动画实例。
一、animation-play-state语法规则
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代码：
CSS3转圈彩色文字动画
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;}
}
效果图：
CSS3转圈彩色文字动画
