CSS3 翻滚重落文字动画实例及animation-direction属性规则

亮术网 2017-06-08 本网原创

　　在CSS3制作动画众多属性中，其中有一个控制动画是否反向运动的属性，也就是动画正常运动（沿事先设计的运动方向运动）和反向运动（沿事先设计运动方向相反的方向运动，即从后向前运动）。一般来说，这个属性不常用，因为反向运动有的动画并不好看，当然有些动画反向运动又特别好看，所以有时候会用到。

　　animation-direction大多情况下，都不设置，取默认值normal即可；如果要设置主要有三个值供选择，具体是哪三个值，见下面的语法规则。至于如何应用，看文章最后的翻滚重落文字动画实例。

　　一、animation-direction语法规则

　　animation-direction：<single-animation-direction>[, <single-animation-direction> * ]

　　<single-animation-direction> = normal | reverse | alternate | alternate-reverse

　　二、语法说明

　　1、animation-direction 可以设置多个动画循环中是否反向，默认值为normal

　　A、animation-direction 表示第一个动画循环中是否反向，不能省略；

　　B、[]中的 animation-direction 表示第二个动画循环中是否反向，可以省略；

　　C、* 表示第三个、第四个、……第n个动画循环中是否反向，可以省略；

　　2、animation-direction 取值如下：

　　normal：动画正常方向（事先设计的方向）；

　　reverse：动画反方向运动；

　　alternate：动画先正常运动再反方向运动，并如此重复；

　　alternate-reverse：动画先反运动再正方向运动，并如此重复。

　　三、animation-direction翻滚重落文字动画实例

　　以下是一个翻滚重落文字动画实例，文字一边快速翻滚，一边向左下角运动，最后闪速翻滚重落再慢慢升起。实例中，没有设置动画反向运动，但效果图中有一个设置了反向运动，设置不设置其实很简单，加 animation-direction 的后三个取值即可。

　　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;}

@keyframes text-animation{
0%{transform:translate(0, 0); opacity:0;}
10%{transform:rotate(-180deg);opacity:0.25;}
20%{transform:rotate(180deg);opacity:0.5; font-size:22px;}

30%{transform:rotate(-180deg);opacity:1; font-size:52px;}
40%{transform:rotate(180deg);opacity:1; font-size:52px;}
50%{transform:rotate(-180deg);opacity:1; font-size:52px;}
60%{transform:rotate(180deg);opacity:1; font-size:52px;}
62%{transform:translate(26px, 100px);opacity:1; font-size:52px;}
100%{transform:translate(26px, 70px);font-size:52px;opacity:1;color:Fuchsia;}

}
　　</style>

　　效果图（正常）：