CSS常用样式（四）之animation

　　上篇CSS常用样式（三）这篇博文中已经介绍过了CSS中具有动画效果的transition、transform，今天来大概说说CSS中的animation。animation的加入会使得动画效果更加乐观。

　　animation

　　 animation的实现需要通过keyframes来实现。keyframes（关键帧），类似于flash当中的关键帧。关键帧有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状等。不过有一点需要注意的是，我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是，其中"0%"不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百分符号（“%”）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。

　　不同浏览器下的写法：　　

内核类型	写法
Webkit(Chrome/Safari)	-webkit-animation
Gecko(Firefox)	-moz-animation
Presto(Opera)
Trident(IE)	-ms-animation
W3C	animation

　

 

 

 

 

 

　　属性说明：

　1、animation-name:检索或设置对象所应用的动画名称,必须与规则@keyframes配合使用。动画名可自由取，语义化的更好

　2、animation-duration：检索或设置对象动画的持续时间

　3、animation-timing-function:检索或设置对象动画的过渡类型

　　取值：

　　linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

　　ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

　　ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

　　ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

　　ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

　　cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

　4、animation-iteration-count：检索或设置对象动画的循环次数

　　　　取值：

　　　　infinite：无限循环

　　　　number：指定对象动画的具体循环次数

　5、animation-direction：检索或设置对象动画在循环中是否反向运动

　　　　取值：

　　　　normal：正常方向

　　　　alternate：正常与反向交替

　6、animation-play-state：检索或设置对象动画的状态

　　　　running：运动

　　　　paused：暂停

　7、animation-fill-mode：检索或设置对象动画时间之外的状态

　　　　取值：

　　　　none：默认值。不设置对象动画之外的状态

　　　　forwards：设置对象状态为动画结束时的状态

　　　　backwards：设置对象状态为动画开始时的状态

　　　　both：设置对象状态为动画结束或开始的状态

　　下面举个例子综合说明：

　　CSS代码：

<span style="font-family: 'Microsoft YaHei'; font-size: 15px;"><span style="color: #800000;">    #animation
            </span>{<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 250px</span>;<span style="color: #ff0000;">
                height</span>:<span style="color: #0000ff;"> 250px</span>;<span style="color: #ff0000;">
                background-color</span>:<span style="color: #0000ff;"> brown</span>;<span style="color: #ff0000;">
                opacity</span>:<span style="color: #0000ff;"> 0.5</span>;<span style="color: #ff0000;">
                position</span>:<span style="color: #0000ff;">absolute</span>;<span style="color: #ff0000;">                
                left</span>:<span style="color: #0000ff;">40%</span>;<span style="color: #ff0000;">
                overflow</span>:<span style="color: #0000ff;"> hidden</span>;
                
            }<span style="color: #800000;">
            #animation span
            </span>{<span style="color: #ff0000;">
                font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;<span style="color: #ff0000;">
                font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
                color</span>:<span style="color: #0000ff;"> #ccc</span>;<span style="color: #ff0000;">
                opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
                display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
                margin</span>:<span style="color: #0000ff;"> 30px</span>;
                
            }<span style="color: #800000;">
            #text1:hover
            </span>{<span style="color: #ff0000;">
                -moz-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;/*鼠标经过时暂停动画*/<span style="color: #ff0000;">
                -webkit-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -o-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -ms-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                animation-play-state</span>:<span style="color: #0000ff;">paused</span>;

            }<span style="color: #800000;">
            #text2:hover
            </span>{<span style="color: #ff0000;">
                -moz-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -webkit-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -o-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -ms-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                animation-play-state</span>:<span style="color: #0000ff;">paused</span>;

            }<span style="color: #800000;">
            #text1
            </span>{<span style="color: #ff0000;">
                
                -webkit-animation-name</span>:<span style="color: #0000ff;">animation1</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">动画名称</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-duration</span>:<span style="color: #0000ff;">4s</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">动画持续时间</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">变化由慢到快</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">过了2S后开始动画</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">设置动画无限播放</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-transform</span>:<span style="color: #0000ff;"> translate(55px)</span>;<span style="color: #ff0000;">
                
                animation-name</span>:<span style="color: #0000ff;">animation1</span>;<span style="color: #ff0000;">
                animation-delay</span>:<span style="color: #0000ff;"> 4s</span>;<span style="color: #ff0000;">
                animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> translate(55px)</span>;<span style="color: #ff0000;">
                
                -ms-animation-name</span>:<span style="color: #0000ff;">animation1</span>;<span style="color: #ff0000;">
                -ms-animation-duration</span>:<span style="color: #0000ff;">4s </span>;<span style="color: #ff0000;">
                -ms-animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                -ms-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                -ms-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
                -ms-transform</span>:<span style="color: #0000ff;"> translate(55px)</span>;<span style="color: #ff0000;">
                
                -moz-animation-name</span>:<span style="color: #0000ff;">animation1</span>;<span style="color: #ff0000;">
                -moz-animation-delay</span>:<span style="color: #0000ff;">4s </span>;<span style="color: #ff0000;">
                -moz-animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                -moz-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                -moz-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">    
                -moz-transform</span>:<span style="color: #0000ff;"> translate(55px)</span>;
            }<span style="color: #800000;">
            #text2
            </span>{<span style="color: #ff0000;">
                -webkit-animation-name</span>:<span style="color: #0000ff;">animation2</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">动画名称</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-duration</span>:<span style="color: #0000ff;">4s</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">动画持续时间</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">变化由慢到快</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">过了2S后开始动画</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">设置动画无限播放</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">
                
                animation-name</span>:<span style="color: #0000ff;">animation2</span>;<span style="color: #ff0000;">
                animation-delay</span>:<span style="color: #0000ff;"> 4s</span>;<span style="color: #ff0000;">
                animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">
                
                -ms-animation-name</span>:<span style="color: #0000ff;">animation2</span>;<span style="color: #ff0000;">
                -ms-animation-duration</span>:<span style="color: #0000ff;">4s </span>;<span style="color: #ff0000;">
                -ms-animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                -ms-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                -ms-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
                -ms-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">
                
                -moz-animation-name</span>:<span style="color: #0000ff;">animation2</span>;<span style="color: #ff0000;">
                -moz-animation-delay</span>:<span style="color: #0000ff;">4s </span>;<span style="color: #ff0000;">
                -moz-animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                -moz-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                -moz-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">    
                -moz-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;        
                    
            }<span style="color: #800000;">
            @-webkit-keyframes animation1
            </span>{<span style="color: #ff0000;">
                0%{-webkit-transform</span>:<span style="color: #0000ff;"> translate(-10px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0</span>;}<span style="color: #800000;">
                20%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(25px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0.5</span>;}<span style="color: #800000;">
                45%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(45px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 1</span>;}<span style="color: #800000;">
                100%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0.8</span>;}<span style="color: #800000;">
                
            }
            @-webkit-keyframes animation2
            </span>{<span style="color: #ff0000;">
                0%{-webkit-transform</span>:<span style="color: #0000ff;"> translate(280px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0</span>;}<span style="color: #800000;">
                30%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(200px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0.5</span>;}<span style="color: #800000;">
                65%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(130px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 1</span>;}<span style="color: #800000;">                
                100%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0.8</span>;}<span style="color: #800000;">
            }</span></span>

　　HTML代码：　

<span style="font-family: 'Microsoft YaHei'; font-size: 16px;"><span style="color: #000000;"><div id="animation">
    <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="text1"</span><span style="color: #0000ff;">></span>这是ly婠婠的博客<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="text2"</span><span style="color: #0000ff;">></span>欢迎访问和评论！<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>            
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>
</span>
</div>
<p><span style="font-family: 'Microsoft YaHei';">效果如下：</span></p>
<div id="animation"><span style="font-family: 'Microsoft YaHei';"><span id="text1"><img src="http://images2015.cnblogs.com/blog/808020/201608/808020-20160815205235765-1770859611.gif" alt=""></span></span></div>
<p><span style="font-family: 'Microsoft YaHei'; font-size: 16px;">解析说明：</span></p>
<p><span style="font-family: 'Microsoft YaHei'; font-size: 16px;">在这个例子中，效果如上图。这里主要是利用animation和translate来达到一个文字渐进的效果。translate的作用是让文字根据给定值发生平移。animation则利用关键帧和百分比数值来将平移过程细分成几个帧，然后设置持续时间，一帧帧连接起来形成动画。</span></p></span></span>