html 纯css设置转圈,CSS3 转圈彩色文字动画实例及animation-play-state属性规则

网页中的动画通常是当鼠标移到上面，动画立即停止，便于用户阅读；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转圈彩色文字动画