CSS3中過渡與動畫有哪些區(qū)別

這篇文章主要介紹“CSS3中過渡與動畫有哪些區(qū)別”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“CSS3中過渡與動畫有哪些區(qū)別”文章能幫助大家解決問題。

CSS3中過渡與動畫的區(qū)別：1、css過渡需要事件觸發(fā)，而css動畫不需要；2、css過渡只有一組（兩個）關(guān)鍵幀，分別設(shè)置開始和結(jié)束的動作，而css動畫可以定義多個關(guān)鍵幀。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

transition 過渡

讓css變化平滑一些

屬性：

語法：

transiton: 過渡屬性 過渡所需要時間 過渡動畫函數(shù) 過渡延遲時間；    //合在一起

栗子：

<style>
img{
    height:150px;
    width:150px;
    transition: height 0.5s linear 0.5s;
}
img:hover{
    height:100px;
}
</style>

transition的優(yōu)點在于簡單易用，但是它有幾個很大的局限。

• transition需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時自動發(fā)生。

• transition是一次性的，不能重復(fù)發(fā)生，除非一再觸發(fā)。

• transition只能定義開始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)。

• 一條transition規(guī)則，只能定義一個屬性的變化，不能涉及多個屬性。

CSS Animation就是為了解決這些問題而提出的。

animation 動畫

通過控制關(guān)鍵幀來控制動畫的每一步，實現(xiàn)更為復(fù)雜的動畫效果

屬性：

制作動畫分為兩部分：

• 用關(guān)鍵幀聲明一個動畫

• 在animation調(diào)用關(guān)鍵幀聲明的的動畫。

@keyframes就是關(guān)鍵幀，一個動畫中可以有很多個幀。

一個@keyframes中的樣式規(guī)則是由多個百分比構(gòu)成的，可以在這個規(guī)則上創(chuàng)建多個百分比，從而達(dá)到一種不斷變化的效果。

栗子：

<style>
    img{
        width:90px;
        height:90px;
        animation: mychange 1s infinate 1s;
        -webkit-animation: mychange 1s infinate 1s;
    }
    
    @keyframes mychange{
        0%{width:90px; height:90px;  }
        50%{width:130px; height:130px;}
        100%{width:200px; height:200px;}
    }
    @-webkit-keyframes mychange{
        0%{width:90px; height:90px;  }
        50%{width:130px; height:130px;}
        100%{width:200px; height:200px;}
    }
</style>

上面代碼中的0% 100%的百分號都不能省略，0%可以由from代替，100%可以由to代替。要讓mychange動畫有效果，就必須要通過CSS3 animation屬性來調(diào)用它。

css過渡與動畫的區(qū)別

其主要區(qū)別在于：transition需要觸發(fā)一個事件才會隨著時間改變其CSS屬性；animation在不需要觸發(fā)任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達(dá)到一種動畫的效果。

1）css過渡需要有一個事件觸發(fā)（像 :hover等），才會起作用，而animation不需要。

2）過渡只有一組（兩個：開始-結(jié)束） 關(guān)鍵幀，動畫可以定義多個關(guān)鍵幀。

3）用過渡和動畫做一個鼠標(biāo)懸停時產(chǎn)生動效的效果，當(dāng)鼠標(biāo)移開時，用過渡做的效果會緩慢的變回原來的樣子，而動畫是唰的一下變回原來的樣子。

關(guān)于“CSS3中過渡與動畫有哪些區(qū)別”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。