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

資訊專欄INFORMATION COLUMN

[ CSS ] animation 快速參考

Integ / 1398人閱讀

摘要：僅供快速參考，如果想詳細(xì)了解相關(guān)內(nèi)容，請參閱阮老師的博客關(guān)于動畫和變換部分有個詞很容易混淆，分別是變換平移過渡其中和常見于如下形式而用于的動畫，表示過渡效果的寫法的寫法

僅供快速參考，如果想詳細(xì)了解相關(guān)內(nèi)容，請參閱阮老師的博客 ：
http://www.ruanyifeng.com/blo...

css關(guān)于動畫和變換部分有3個詞很容易混淆，分別是transform(變換), translate(平移), transition(過渡)

其中transform和translate常見于如下形式：

.class
{
    transform: translate(826px);
}

而transition用于css3的動畫，表示過渡效果

1. transition 


.class1
{
    transition: duration   , an other group;
}
.complete
{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}
2. animation


animation的寫法 
.class1
{
    animation: duration  name     ;
    animation-play-state: play-state;
}

duration: 1s

delay: 1s

name: name

timing-function: linear | ease-in | ease-out | cubic-bezier

iteration-count: 10 | infinite

fill-mode: forwards | none | backwards | both

direction: normal | alternate | reverse | alternate-reverse

step(n): step(2) | step(10)

play-state: running | paused

keyframe的寫法 
@keyframes rainbow
{
    0%
    { 
        background: #c00; 
    }
    50%
    { 
        background: orange; 
    }
    100%
    { 
        background: yellowgreen; 
    }
}
@keyframes rainbow
{
    from
    {
        background: #c00;
    }
    50%
    { 
        background: orange; 
    }
    to
    { 
        background: yellowgreen; 
    }
}

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112921.html

相關(guān)文章

  • 前端常用插件、工具類庫匯總

    摘要：頁面調(diào)試騰訊開發(fā)維護(hù)的代碼調(diào)試發(fā)布，錯誤監(jiān)控上報，用戶問題定位。同樣是由騰訊開發(fā)維護(hù)的代碼調(diào)試工具，是針對移動端的調(diào)試工具。前端業(yè)務(wù)代碼工具庫。動畫庫動畫庫，也是目前通用的動畫庫。 本人微信公眾號：前端修煉之路，歡迎關(guān)注 本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。 另外，感謝白小明，文中很多的工具來源于此。 彈出框 layer：http://layer....

    GitCafe 評論0 收藏0

  • 說說動畫卡頓的解決方案

    摘要：動畫卡頓解決方案前端時間用實現(xiàn)頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留后再縮小至頂部。參考文章深入瀏覽器理解和的性能問題解決動畫卡頓的辦法 CSS3 動畫卡頓解決方案 前端時間用animation實現(xiàn)H5頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留700ms后再縮小至頂部。代碼如下 ...

    AlphaWatch 評論0 收藏0

  • 說說動畫卡頓的解決方案

    摘要：動畫卡頓解決方案前端時間用實現(xiàn)頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留后再縮小至頂部。參考文章深入瀏覽器理解和的性能問題解決動畫卡頓的辦法 CSS3 動畫卡頓解決方案 前端時間用animation實現(xiàn)H5頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留700ms后再縮小至頂部。代碼如下 ...

    時飛 評論0 收藏0

  • 推薦三兩款前端動畫庫，anitmate.css, velocity-animate， anime,

    摘要：所以就說說吧優(yōu)點可自定義動畫效果，支持隊列動效支持回調(diào)函數(shù)支持動畫的，等等功能缺點缺少自定義特效文檔比較少使用遇到的小問題默認(rèn)不是勻速的，需要設(shè)置詳細(xì)整理待續(xù) 在最近一段時間的工作里，常常用到動畫，我主要接觸了三個 animate.cssanimevelocity 下面分析一下他們的優(yōu)缺點 animate.css 優(yōu)點：animate.css主要是使用css實現(xiàn)動畫效果，目前已經(jīng)有幾十...

    xzavier 評論0 收藏0

發(fā)表評論

0條評論

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