国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

「CSS3 」動畫詳解

weij / 396人閱讀

摘要:規定動畫的名稱。規定動畫是否在下一周期逆向地播放。定義動畫各個階段的狀態的代碼段。動畫的周期時間。動畫的循環次數。動畫完成后,元素保持動畫最后的狀態。重要提示請不要忘記推薦和收藏搜索動畫詳解

CSS3 提供給了我們非常多的轉換函數:

2D: translate, rotate, scale, skew.

3D: translate3d, rotate3d, scale3d, skew3d.

只需要將這些函數作為transform屬性的值,就可以設置相應的效果。

CSS3 動畫則是將這些效果以及其他CSS屬性按照你設定的方式來進行互相轉變。

1. 動畫相關屬性

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

@keyframes

定義動畫各個階段的狀態的代碼段。比如開始態,結束態,中間態(使用百分比表示)。

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

使用 @keyframes 定義的狀態集合名稱,如上面的 exampleName

animation-duration

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

animation-timing-function

動畫變化速度函數,有如下幾種選項:

linear: 速度不變。cubic-bezier(0,0,1,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)

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

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

cubic-bezier曲線測試調試網站:cubic-bezier

animation-delay

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

animation-iteration-count

動畫的循環次數。可以是具體的次數,也可以是 infinite,表示無限循環播放。

animation-direction

動畫循環的方向:

normal: 正向播放。

reverse: 反向播放。

alternate: 正向播放與反向播放交替進行。

animation

以上6個屬性可以使用這一個屬性來表示,格式為:

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

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

animation-fill-mode

規定元素在動畫開始前和完成后的狀態。

none: 元素在動畫前后的狀態和動畫沒有聯系。

forwards: 動畫完成后,元素保持動畫最后的狀態。

backwards: 動畫開始前,元素保持動畫開始的狀態。

both: forwardsbackwards 的結合。

2. transition

CSS3 除了 animation 相關的屬性以外,還提供給我們一個 transition 屬性,格式為:

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

大家可能已經也看出來了,其實 transition 就是 @keyframes 只有 fromto 兩個狀態,并且播放次數為1,且不能暫停的 animation

舉個例子,當鼠標放到一個 div 上的時候,它旋轉90度,并且背景從黑色變為灰色,字體從白色變為黑色。

#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

搜索 動畫詳解

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111130.html

相關文章

  • 詳解css3系列:動畫@keyframes和Animation

    摘要:定義動畫的名稱。動畫時長的百分比。在中,我們以百分比來規定改變發生的時間,或者通過關鍵詞和,等價于和。其中,是動畫的開始時間,動畫的結束時間。規定完成動畫所花費的時間,以秒或毫秒計。動畫應該正常播放。 贊助我以寫出更好的文章,give me a cup of coffee? 2017最新最全前端面試題 在css3中,我們可以通過@keyframes創建關鍵幀動畫效果。我們需要將@ke...

    codergarden 評論0 收藏0
  • css3動畫屬性詳解之transform、transition、animation

    摘要:動畫屬性詳解關于制作動畫的幾個屬性變形轉換和動畫。一屬性旋轉中心為原點扭曲傾斜縮放移動矩陣變形。各個屬性的用法旋轉其中表示度。承載動畫的另一個屬性。定義動畫的名稱。一個或多個合法的樣式屬性。 css3動畫屬性詳解: 關于CSS3制作動畫的幾個屬性:變形(transform)、轉換(transition)和動畫(animation)。 一、transform 屬性: 旋轉rotate(中...

    Riddler 評論0 收藏0
  • 2017文章總結

    摘要:歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動 歡迎來我的個人站點 性能優化 其他 優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅 高性能滾動 scroll 及頁面渲染優化 理論 | HTML寫法...

    dailybird 評論0 收藏0
  • 2017文章總結

    摘要:歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動 歡迎來我的個人站點 性能優化 其他 優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅 高性能滾動 scroll 及頁面渲染優化 理論 | HTML寫法...

    hellowoody 評論0 收藏0
  • 2017文章總結

    摘要:歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動 歡迎來我的個人站點 性能優化 其他 優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅 高性能滾動 scroll 及頁面渲染優化 理論 | HTML寫法...

    wwolf 評論0 收藏0

發表評論

0條評論

weij

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<