CSS3中的Transition過(guò)度與Animation動(dòng)畫屬性使用要點(diǎn)有哪些

本篇文章給大家分享的是有關(guān)CSS3中的Transition過(guò)度與Animation動(dòng)畫屬性使用要點(diǎn)有哪些，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

Transition（過(guò)度）
Transition允許CSS的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫效果改變CSS的屬性值，它的語(yǔ)法如下：

CSS Code復(fù)制內(nèi)容到剪貼板

1. transition: property duration timing-function delay;   
   /*  
   property：執(zhí)行過(guò)渡的屬性  
   duration：執(zhí)行過(guò)渡的持續(xù)時(shí)間  
   timing-function：執(zhí)行過(guò)渡的速率模式  
   delay：延時(shí)多久執(zhí)行  
   */

transition-property
可取值：

none
沒有屬性會(huì)獲得過(guò)渡效果。
all
所有屬性都將獲得過(guò)渡效果。
property
定義應(yīng)用過(guò)渡效果的 CSS 屬性名稱列表，列表以逗號(hào)分隔。

CSS Code復(fù)制內(nèi)容到剪貼板

1. div{   
   transition-property:width;   
   -moz-transition-property: width;/* Firefox 4 */  
   -webkit-transition-property:width; /* Safari 和 Chrome */  
   -o-transition-property:width;    
   /* Opera */}

transition-duration
參數(shù)為時(shí)間，單位為s（秒）或者ms（毫秒），默認(rèn)就是0，回想一下如果只有transform屬性，是不是變換啪地一下完成了。

CSS Code復(fù)制內(nèi)容到剪貼板

div{   
transition-duration: 5s;   
-moz-transition-duration: 5s; /* Firefox 4 */  
-webkit-transition-duration: 5s; /* Safari 和 Chrome */  
-o-transition-duration: 5s; /* Opera */}

transition-timing-function

既然是動(dòng)畫，那么就有動(dòng)畫的運(yùn)行速率，不同的速度會(huì)產(chǎn)生不同的結(jié)果，以下是可取值。

ease：（逐漸變慢）默認(rèn)值，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
linear：（勻速），linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
ease-in：(加速)，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).
ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).
ease-in-out：（加速然后減速），ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

transition-delay
參數(shù)為時(shí)間，單位為s（秒）或者ms（毫秒），默認(rèn)就是0，也就是立即執(zhí)行，如果在多個(gè)動(dòng)畫直接有先后順序，那么它就會(huì)派上用場(chǎng)。

Animation（動(dòng)畫）
關(guān)鍵幀 Keyframe
實(shí)現(xiàn)自定義動(dòng)畫，通過(guò)對(duì)關(guān)鍵幀的設(shè)定來(lái)實(shí)現(xiàn)，也就是規(guī)定從起始點(diǎn)（0%）到終點(diǎn)（100%）之間的具體節(jié)點(diǎn)上的動(dòng)畫樣式。就好比一個(gè)人起床，睜開眼睛（0%），站起來(lái)（10%），穿上衣（40%），穿褲子（80%），整理面容（100%），這樣子把每個(gè)節(jié)點(diǎn)串起來(lái)便是動(dòng)畫了。

再說(shuō)動(dòng)畫
動(dòng)畫，關(guān)鍵在于動(dòng)字，那么對(duì)于頁(yè)面上的元素來(lái)說(shuō)，能發(fā)生變化的便是它的樣式屬性，比如用animation規(guī)定自定義動(dòng)畫，內(nèi)容為font-size從18px，變?yōu)?8px，這個(gè)便是動(dòng)，加上其自身的屬性（它可以規(guī)定動(dòng)畫持續(xù)時(shí)間，運(yùn)動(dòng)形式等等），便可以呈現(xiàn)動(dòng)態(tài)的效果，而不是一瞬間的變化。

通常，transition要想實(shí)現(xiàn)動(dòng)畫通常需要由hover偽類來(lái)觸發(fā)，否則在頁(yè)面加載的時(shí)候它已經(jīng)運(yùn)動(dòng)完畢，保持運(yùn)動(dòng)的末態(tài)，這并不是我們想要的。animation不一樣，它擁有更多的表現(xiàn)形式，使其看起來(lái)像與生俱來(lái)，天生就會(huì)動(dòng)一樣。

語(yǔ)法

CSS Code復(fù)制內(nèi)容到剪貼板

1. .area{   
        width: 50px;   
        height: 50px;   
        margin-left: 100px;   
        background: blue;   
        -webkit-animation-name:'demo';/*動(dòng)畫屬性名，也就是我們前面keyframes定義的動(dòng)畫名*/  
        -webkit-animation-duration: 10s;/*動(dòng)畫持續(xù)時(shí)間*/  
        -webkit-animation-timing-function: ease-in-out; /*動(dòng)畫頻率，和transition-timing-function是一樣的*/  
        -webkit-animation-delay: 2s;/*動(dòng)畫延遲時(shí)間*/  
        -webkit-animation-iteration-count: infinite;/*定義循環(huán)資料，infinite為無(wú)限次*/  
        -webkit-animation-direction: alternate;/*定義動(dòng)畫方式*/  
     }

實(shí)例和簡(jiǎn)寫
需要注意的是最后一個(gè)屬性，direction，我們可以這么想，A從甲地到了乙地這是一個(gè)動(dòng)畫，設(shè)置為normal時(shí)，第二次播放時(shí)便又是從頭開始，顯得很突兀，這個(gè)時(shí)候需要用alternate，使其看起來(lái)A在甲乙兩地之間來(lái)回運(yùn)動(dòng)，代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板

2. /*  
   甲地和乙地這兩個(gè)球都是absolutely定位方式，小球也是，只要控制left值即可  
   */  
   .circle{   
   //我給這個(gè)小球球增加了一個(gè)名為demo1的動(dòng)畫   
   //你看，它就自己動(dòng)起來(lái)了，回想一下，使用transform的時(shí)候，是不是還得用hover去觸發(fā)   
    -webkit-animation: 'demo1' 2s linear infinite alternate;   
       -o-animation: 'demo1' 2s linear infinite alternate;   
       animation: 'demo1' 2s linear infinite alternate;   
   }   
   //定義動(dòng)畫部分   
   //我只寫了-webkit，真實(shí)中加上@-0-,@-moz-,@keyframes   
   @-webkit-keyframes demo1 {   
       from {    
           left:200px;   
           background-color: lightcoral;   
        }   
        50%{   
            left:290px;   
            background-color: lightblue ;   
        }   
     
       to {    
           left:380px;   
           background-color: lightseagreen;   
        }   
   }

alternate方式，放完就倒著放一遍

normal方式，就是放完重頭再放

以上就是CSS3中的Transition過(guò)度與Animation動(dòng)畫屬性使用要點(diǎn)有哪些，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。