| 值 | 描述 |
|---|---|
| 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 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值 |
注意：并不是所有的屬性都能使用過(guò)渡的，如display:none<->display:block
舉個(gè)例子，實(shí)現(xiàn)鼠標(biāo)移動(dòng)上去發(fā)生變化動(dòng)畫效果
<style>
.base {
width: 100px;
height: 100px;
display: inline-block;
background-color: #0EA9FF;
border-width: 5px;
border-style: solid;
border-color: #5daf34;
transition-property: width, height, background-color, border-width;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 500ms;
}
/*簡(jiǎn)寫*/
/*transition: all 2s ease-in 500ms;*/
.base:hover {
width: 200px;
height: 200px;
background-color: #5daf34;
border-width: 10px;
border-color: #3a8ee6;
}
</style>
<div ></div>
包含四個(gè)常用的功能：
一般配合transition過(guò)度使用
注意的是，transform不支持inline元素，使用前把它變成block
舉個(gè)例子
<style>
.base {
width: 100px;
height: 100px;
display: inline-block;
background-color: #0EA9FF;
border-width: 5px;
border-style: solid;
border-color: #5daf34;
transition-property: width, height, background-color, border-width;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 500ms;
}
.base2 {
transform: none;
transition-property: transform;
transition-delay: 5ms;
}
.base2:hover {
transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
}
</style>
<div ></div>
可以看到盒子發(fā)生了旋轉(zhuǎn)，傾斜，平移，放大
animation是由 8 個(gè)屬性的簡(jiǎn)寫，分別如下：
| 屬性 | 描述 | 屬性值 |
|---|---|---|
| animation-duration | 指定動(dòng)畫完成一個(gè)周期所需要時(shí)間，單位秒（s）或毫秒（ms），默認(rèn)是 0 | |
| animation-timing-function | 指定動(dòng)畫計(jì)時(shí)函數(shù)，即動(dòng)畫的速度曲線，默認(rèn)是 "ease" | linear、ease、ease-in、ease-out、ease-in-out |
| animation-delay | 指定動(dòng)畫延遲時(shí)間，即動(dòng)畫何時(shí)開始，默認(rèn)是 0 | |
| animation-iteration-count | 指定動(dòng)畫播放的次數(shù)，默認(rèn)是 1 | |
| animation-direction 指定動(dòng)畫播放的方向 | 默認(rèn)是 normal | normal、reverse、alternate、alternate-reverse |
| animation-fill-mode | 指定動(dòng)畫填充模式。默認(rèn)是 none | forwards、backwards、both |
| animation-play-state | 指定動(dòng)畫播放狀態(tài)，正在運(yùn)行或暫停。默認(rèn)是 running | running、pauser |
| animation-name | 指定 @keyframes 動(dòng)畫的名稱 |
CSS 動(dòng)畫只需要定義一些關(guān)鍵的幀，而其余的幀，瀏覽器會(huì)根據(jù)計(jì)時(shí)函數(shù)插值計(jì)算出來(lái)，
通過(guò) @keyframes 來(lái)定義關(guān)鍵幀
因此，如果我們想要讓元素旋轉(zhuǎn)一圈，只需要定義開始和結(jié)束兩幀即可：
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
from 表示最開始的那一幀，to 表示結(jié)束時(shí)的那一幀
也可以使用百分比刻畫生命周期
@keyframes rotate{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
定義好了關(guān)鍵幀后，下來(lái)就可以直接用它了：
animation: rotate 2s;
| 屬性 | 含義 |
|---|---|
| transition（過(guò)度） | 用于設(shè)置元素的樣式過(guò)度，和animation有著類似的效果，但細(xì)節(jié)上有很大的不同 |
| transform（變形） | 用于元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜，和設(shè)置樣式的動(dòng)畫并沒有什么關(guān)系，就相當(dāng)于color一樣用來(lái)設(shè)置元素的“外表” |
| translate（移動(dòng)） | 只是transform的一個(gè)屬性值，即移動(dòng) |
| animation（動(dòng)畫） | 用于設(shè)置動(dòng)畫屬性，他是一個(gè)簡(jiǎn)寫的屬性，包含6個(gè)屬性 |
以上就是CSS3常見動(dòng)畫的實(shí)現(xiàn)方式的詳細(xì)內(nèi)容，更多關(guān)于CSS3 動(dòng)畫的實(shí)現(xiàn)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
標(biāo)簽：銅陵 欽州 無(wú)錫 湖北 湘西 試駕邀約 綏化 焦作
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《CSS3常見動(dòng)畫的實(shí)現(xiàn)方式》，本文關(guān)鍵詞 CSS3,常見,動(dòng),畫的,實(shí)現(xiàn),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。