「CSS3 」動畫詳解

weij 發(fā)布于2019-08-28 18:16 / 409人閱讀

摘要：規(guī)定動畫的名稱。規(guī)定動畫是否在下一周期逆向地播放。定義動畫各個(gè)階段的狀態(tài)的代碼段。動畫的周期時(shí)間。動畫的循環(huán)次數(shù)。動畫完成后，元素保持動畫最后的狀態(tài)。重要提示請不要忘記推薦和收藏搜索動畫詳解

CSS3 提供給了我們非常多的轉(zhuǎn)換函數(shù)：

2D: translate, rotate, scale, skew.

3D: translate3d, rotate3d, scale3d, skew3d.

只需要將這些函數(shù)作為transform屬性的值，就可以設(shè)置相應(yīng)的效果。

CSS3 動畫則是將這些效果以及其他CSS屬性按照你設(shè)定的方式來進(jìn)行互相轉(zhuǎn)變。

1. 動畫相關(guān)屬性

屬性 | 描述
--------------------------- | ------------------------------------------------------------------------------
@keyframes | 定義動畫各個(gè)階段的狀態(tài)的代碼段
animation | 所有動畫屬性的簡寫屬性，除了 animation-play-state 和 animation-fill-mode 屬性。
animation-name | 規(guī)定 @keyframes 動畫的名稱。
animation-duration | 規(guī)定動畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。
animation-timing-function | 規(guī)定動畫的速度曲線。默認(rèn)是 ease。
animation-delay | 規(guī)定動畫何時(shí)開始。默認(rèn)是 0。
animation-iteration-count | 規(guī)定動畫被播放的次數(shù)。默認(rèn)是 1。
animation-direction | 規(guī)定動畫是否在下一周期逆向地播放。默認(rèn)是 normal。
animation-play-state | 規(guī)定動畫是否正在運(yùn)行或暫停。默認(rèn)是 running。
animation-fill-mode | 規(guī)定元素在動畫開始前和完成后的狀態(tài)，默認(rèn)是 none。

@keyframes

定義動畫各個(gè)階段的狀態(tài)的代碼段。比如開始態(tài)，結(jié)束態(tài)，中間態(tài)（使用百分比表示）。

@keyframes exampleName {
    from {
        transform: rotateY(0deg);
        background: #000000;
    }
    50% {
        transform: rotateY(180deg);
        background: #00fa7e;
    }
    to {
        transform: rotateY(0deg);
        background: #008dff;
    }
}

animation-name

使用 @keyframes 定義的狀態(tài)集合名稱，如上面的 exampleName。

animation-duration

動畫的周期時(shí)間。單位可以是秒(s)，也可以是毫秒(ms)。

animation-timing-function

動畫變化速度函數(shù)，有如下幾種選項(xiàng)：

linear: 速度不變。cubic-bezier(0,0,1,1)

ease-in: 低速開始 ~ 正常速度。cubic-bezier(0.42,0,1,1)

ease-out: 正常速度 ~ 低速結(jié)束。cubic-bezier(0,0,0.58,1)

ease-in-out: 低速開始 ~ 正常速度 ~ 低速結(jié)束。cubic-bezier(0.42,0,0.58,1)

ease: 與 ease-in-out 基本相同，但是開始稍微比結(jié)束快一點(diǎn)兒。cubic-bezier(0.25,0.1,0.25,1)

cubic-bezier(x1, y1, x2, y2): 使用三次貝塞爾函數(shù)作為速度函數(shù)。

cubic-bezier曲線測試調(diào)試網(wǎng)站：cubic-bezier

animation-delay

動畫開始之前等待的時(shí)間。單位可以是秒(s)，也可以是毫秒(ms)。

animation-iteration-count

動畫的循環(huán)次數(shù)?？梢允蔷唧w的次數(shù)，也可以是 infinite，表示無限循環(huán)播放。

animation-direction

動畫循環(huán)的方向：

normal: 正向播放。

reverse: 反向播放。

alternate: 正向播放與反向播放交替進(jìn)行。

animation

以上6個(gè)屬性可以使用這一個(gè)屬性來表示，格式為：

animate: name duration timing-function delay iteration-count direction;

animation-play-state

控制動畫的狀態(tài)，有播放(running)和暫停(paused)兩種狀態(tài)。

animation-fill-mode

規(guī)定元素在動畫開始前和完成后的狀態(tài)。

none: 元素在動畫前后的狀態(tài)和動畫沒有聯(lián)系。

forwards: 動畫完成后，元素保持動畫最后的狀態(tài)。

backwards: 動畫開始前，元素保持動畫開始的狀態(tài)。

both: forwards 和 backwards 的結(jié)合。

2. transition

CSS3 除了 animation 相關(guān)的屬性以外，還提供給我們一個(gè) transition 屬性，格式為：

transition: propertyName duration [timing-function] [delay], ...;

大家可能已經(jīng)也看出來了，其實(shí) transition 就是 @keyframes 只有 from 和 to 兩個(gè)狀態(tài)，并且播放次數(shù)為1，且不能暫停的 animation。

舉個(gè)例子，當(dāng)鼠標(biāo)放到一個(gè) div 上的時(shí)候，它旋轉(zhuǎn)90度，并且背景從黑色變?yōu)榛疑?，字體從白色變?yōu)楹谏?/p>

#division2 {
    width: 300px;
    height: 100px;
    margin-top: 50px;
    font-size: 2em;
    text-align: center;
    line-height: 100px;
    color: #FFF;
    background: #000;
    transition: transform 2s linear 0s, background 2s linear 0s, color 2s linear 0s;
}

#division2:hover {
    background: #cccdd1;
    color: #000;
    transform: rotate(90deg);
}

3. Demo

[重要提示]請不要忘記推薦和收藏 (╯‵□′)╯︵ ┴─┴

git clone https://github.com/JasonKid/fezone.git

搜索 動畫詳解

GPU云服務(wù)器云服務(wù)器 css3動畫高性能css3動畫 js原生動畫詳解 css3

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111130.html

發(fā)表評論

登陸后可評論

0條評論

weij

男|高級講師

我要關(guān)注我要私信

TA的文章

《C語言入門》你真的會打印Hello World嗎，花式打印Hello World

閱讀 3214·2021-11-25 09:43
Spring Boot 2.6正式發(fā)布，Spring Boot 2.4停止維護(hù)

閱讀 3217·2021-11-23 09:51
css 樣式收集

閱讀 3528·2019-08-30 13:08
我們前端是怎么找到工作的

閱讀 1581·2019-08-29 12:48
DataTables表格插件使用說明

閱讀 3604·2019-08-29 12:26
「CSS3 」動畫詳解

閱讀 410·2019-08-28 18:16
ES6—class與模塊化（9）

閱讀 2575·2019-08-26 13:45
關(guān)于JS的面向?qū)ο蟮乃伎己涂偨Y(jié)

閱讀 2441·2019-08-26 12:15

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

「CSS3 」動畫詳解

相關(guān)文章

**詳解css3系列：動畫@keyframes和Animation**

css3動畫屬性詳解之transform、transition、animation

2017文章總結(jié)

2017文章總結(jié)

2017文章總結(jié)

發(fā)表評論

0條評論

weij

男|高級講師

TA的文章

《C語言入門》你真的會打印Hello World嗎，花式打印Hello World

Spring Boot 2.6正式發(fā)布，Spring Boot 2.4停止維護(hù)

css 樣式收集

我們前端是怎么找到工作的

DataTables表格插件使用說明