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><span style="color: #0000ff;"><</span><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><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>

效果如下：

解析说明：

在这个例子中，效果如上图。这里主要是利用animation和translate来达到一个文字渐进的效果。translate的作用是让文字根据给定值发生平移。animation则利用关键帧和百分比数值来将平移过程细分成几个帧，然后设置持续时间，一帧帧连接起来形成动画。