CSS3中轉場與動畫的差別是什麼

CSS3中過渡與動畫的區別：1、css過渡需要事件觸發，而css動畫不需要；2、css過渡只有一組（兩個）關鍵幀，分別設定開始和結束的動作，而css動畫可以定義多個關鍵影格。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

transition 過渡

讓css變化平滑一些

#屬性：

屬性	描述
#transtion-property	#指定過渡的屬性
transtion-duration	指定過渡所需時間
transtion-timing-function	指定過渡函數
transtion-delay	指定過渡延遲時間

#語法：

transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；    //合在一起

栗子：

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

transition的優點在於簡單易用，但它有幾個很大的限制。

• transition需要事件觸發，所以沒辦法在網頁載入時自動發生。
• transition是一次性的，不能重複發生，除非一再觸發。
• transition只能定義開始狀態和結束狀態，不能定義中間狀態。
• 一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

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

animation 動畫

透過控制關鍵影格來控制動畫的每一步，實現更複雜的動畫效果

屬性：

##animation -iteration-count指定動畫的播放次數，預設為1，若為infinite，則無限次循環播放animation-direction

屬性	描述
#animation-name	指定關鍵影格動畫的名字
animation-duration	指定動畫播放所需時間，單位秒
animation-timing-function	指定動畫播放方式
animation-delay	#指定動畫開始時間，單位秒

##指定動畫的播放方向，預設為normal，若為alternate，即輪流反向播放

#製作動畫分為兩部分：

用關鍵影格宣告一個動畫

在animation呼叫關鍵影格宣告的的動畫。

@keyframes就是關鍵幀，一個動畫中可以有很多個幀。 一個@keyframes中的樣式規則是由多個百分比構成的，可以在這個規則上創建多個百分比，從而達到不斷變化的效果。

栗子：###

<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屬性來呼叫它。 ############css過渡與動畫的區別############其主要差異在於：transition需要觸發一個事件才會隨著時間改變其CSS屬性； animation在不需要觸發任何事件的情況下，也可以明確的隨時間變化來改變元素CSS屬性，達到一種動畫的效果。 ######1）css過渡需要有事件觸發（像 :hover等），才會起作用，而animation不需要。 ######2）轉場只有一組（兩個：開始-結束） 關鍵幀，動畫可以定義多個關鍵幀。 ######3）用過渡和動畫做一個滑鼠懸停時產生動效的效果，當滑鼠移開時，用過渡做的效果會緩慢的變回原來的樣子，而動畫是唰的一下變回原來的樣子。 ######（學習影片分享：###css影片教學###、###web前端入門教學###）###

以上是CSS3中轉場與動畫的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！