transition

早期要實現動畫效果，都是依賴于JavaScript或Flash來完成。但在CSS3中新增加了一個新的模塊transition，它可以通過一些簡單的CSS事件來觸發元素的外觀變化，讓效果顯得更加細膩。通過鼠標的單擊、獲得焦點，被點擊或對元素任何改變中觸發，并平滑地以動畫效果改變CSS的屬性值。

transition 屬性用于設置元素兩種狀態間的過渡動畫,是transition-property、transition-duration 、transition-timing-function、transition-delay四個屬性的縮寫

transition-property 用于設置動畫屬性，它來指定過渡或動態模擬的CSS屬性，過渡屬性只有具備一個中點值的屬性(需要產生動畫的屬性)才能具備過渡效果，默認值為all

transition-duration 用于設置動畫時長

transition-timing-function 用于設置動畫時間函數,參數見下表:

值

描述

linear

規定以相同速度開始至結束的過渡效果(等于 cubic-bezier(0,0,1,1))

ease

規定慢速開始，然后變快，然后慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1)

ease-in

規定以慢速開始的過渡效果(等于 cubic-bezier(0.42,0,1,1))

ease-out

規定以慢速結束的過渡效果(等于 cubic-bezier(0,0,0.58,1))

ease-in-out

規定以慢速開始和結束的過渡效果(等于 cubic-bezier(0.42,0,0.58,1))

cubic-bezier(n,n,n,n)

在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值

transition 動畫實戰

下面我們利用transition來完成一些基本的動畫:

我們先制作一個div,鼠標放到它上面的時候,我們讓它寬度增加的同時再改變一下它的顏色:

transition

div {

width: 100px;

height:60px;

background-color: #e3e3e3;

transition: all .3s linear .1s

}

div:hover {

width: 300px;

background-color: blue;

}

當前這種transition的寫法是代表:默認所有div的屬性都會在0.3s的時間內,延時0.1s執行一個線性的(相同速度開始至結束)過渡效果

在剛才的基礎上,我們還可以更精細的控制這部分動畫,比如:

我們想讓當前的寬度在0.3s內延時0.1s執行一個linear過渡效果的動畫,

我們想讓當前的背景色在0.2s內立即執行一個ease-in-out 過渡效果的動畫

這樣我們只需將transition設置多個屬性,具體寫法如下:

div {

width: 100px;

height:60px;

background-color: #e3e3e3;

transition: width .3s linear .1s, background-color .3s ease-in-out .1s

}

div:hover {

width: 300px;

background-color: blue;

}

CSS動畫進階(transform)

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的html和css制作动漫岛,CSS动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。