transition

早期要實(shí)現(xiàn)動(dòng)畫(huà)效果，都是依賴(lài)于JavaScript或Flash來(lái)完成。但在CSS3中新增加了一個(gè)新的模塊transition，它可以通過(guò)一些簡(jiǎn)單的CSS事件來(lái)觸發(fā)元素的外觀變化，讓效果顯得更加細(xì)膩。通過(guò)鼠標(biāo)的單擊、獲得焦點(diǎn)，被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并平滑地以動(dòng)畫(huà)效果改變CSS的屬性值。

transition 屬性用于設(shè)置元素兩種狀態(tài)間的過(guò)渡動(dòng)畫(huà),是transition-property、transition-duration 、transition-timing-function、transition-delay四個(gè)屬性的縮寫(xiě)

transition-property 用于設(shè)置動(dòng)畫(huà)屬性，它來(lái)指定過(guò)渡或動(dòng)態(tài)模擬的CSS屬性，過(guò)渡屬性只有具備一個(gè)中點(diǎn)值的屬性(需要產(chǎn)生動(dòng)畫(huà)的屬性)才能具備過(guò)渡效果，默認(rèn)值為all

transition-duration 用于設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)

transition-timing-function 用于設(shè)置動(dòng)畫(huà)時(shí)間函數(shù),參數(shù)見(jiàn)下表:

值

描述

linear

規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果(等于 cubic-bezier(0,0,1,1))

ease

規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的過(guò)渡效果(cubic-bezier(0.25,0.1,0.25,1)

ease-in

規(guī)定以慢速開(kāi)始的過(guò)渡效果(等于 cubic-bezier(0.42,0,1,1))

ease-out

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

ease-in-out

規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果(等于 cubic-bezier(0.42,0,0.58,1))

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

在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值

transition 動(dòng)畫(huà)實(shí)戰(zhàn)

下面我們利用transition來(lái)完成一些基本的動(dòng)畫(huà):

我們先制作一個(gè)div,鼠標(biāo)放到它上面的時(shí)候,我們讓它寬度增加的同時(shí)再改變一下它的顏色:

transition

div {

width: 100px;

height:60px;

background-color: #e3e3e3;

transition: all .3s linear .1s

}

div:hover {

width: 300px;

background-color: blue;

}

當(dāng)前這種transition的寫(xiě)法是代表:默認(rèn)所有div的屬性都會(huì)在0.3s的時(shí)間內(nèi),延時(shí)0.1s執(zhí)行一個(gè)線性的(相同速度開(kāi)始至結(jié)束)過(guò)渡效果

在剛才的基礎(chǔ)上,我們還可以更精細(xì)的控制這部分動(dòng)畫(huà),比如:

我們想讓當(dāng)前的寬度在0.3s內(nèi)延時(shí)0.1s執(zhí)行一個(gè)linear過(guò)渡效果的動(dòng)畫(huà),

我們想讓當(dāng)前的背景色在0.2s內(nèi)立即執(zhí)行一個(gè)ease-in-out 過(guò)渡效果的動(dòng)畫(huà)

這樣我們只需將transition設(shè)置多個(gè)屬性,具體寫(xiě)法如下:

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動(dòng)畫(huà)進(jìn)階(transform)

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。