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