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

資訊專欄INFORMATION COLUMN

[ CSS ] animation 快速參考

Integ / 1410人閱讀

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

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

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

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

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

而transition用于css3的動(dòng)畫，表示過渡效果

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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

  • 前端常用插件、工具類庫(kù)匯總

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

    GitCafe 評(píng)論0 收藏0

  • 說說動(dòng)畫卡頓的解決方案

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

    AlphaWatch 評(píng)論0 收藏0

  • 說說動(dòng)畫卡頓的解決方案

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

    時(shí)飛 評(píng)論0 收藏0

  • 推薦三兩款前端動(dòng)畫庫(kù)，anitmate.css, velocity-animate， anime,

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

    xzavier 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<