成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS3 animation 基礎(chǔ)

rose / 1442人閱讀

摘要：最近項(xiàng)目有需求要做一個(gè)的頁(yè)面，涉及到的使用。中間的動(dòng)畫過(guò)程由瀏覽器渲染引擎進(jìn)行渲染。其中可以使用的時(shí)間段或者通過(guò)關(guān)鍵詞和，等價(jià)于和。動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢。動(dòng)畫延遲進(jìn)入動(dòng)畫動(dòng)畫勻速播放持續(xù)，播放一次后將停止在最終的狀態(tài)

最近項(xiàng)目有需求要做一個(gè)H5的頁(yè)面，涉及到CSS3 animation的使用。這里做了一個(gè)項(xiàng)目中的總結(jié)。

animation 基本用法

animation : [name] [keeping-time] [animate-function] [delay] [times] [iteration] [final]

第一個(gè)參數(shù)：name (animation-name)

定義動(dòng)畫的名字，CSS3定義采用" 關(guān)鍵幀[keyframes] "來(lái)定義動(dòng)畫

@keyframes fadeOut{
    0% { opacity : 1}
    100% { opacity : 0}
}

對(duì)應(yīng)不同的瀏覽器需要加前綴做兼容。

以上代碼的意義：定義了一個(gè)動(dòng)畫名字叫fadeOut，0%代表動(dòng)畫初，100%代表動(dòng)畫末。中間的動(dòng)畫過(guò)程由瀏覽器渲染引擎進(jìn)行渲染。其中可以使用的時(shí)間段0%~100%,或者通過(guò)關(guān)鍵詞 "from" 和 "to"，等價(jià)于 0% 和 100%。

第二個(gè)參數(shù)：keeping-time (animation-duration)

整個(gè)動(dòng)畫持續(xù)的時(shí)間，必須帶時(shí)間單位，s或者ms

第三個(gè)參數(shù)：animate-function (animation-timing-function)

運(yùn)動(dòng)方式的貝塞爾曲線，基本值

linear       
// 動(dòng)畫從頭到尾的速度是相同的。

ease        
// 默認(rèn)。動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢。 

ease-in      
// 動(dòng)畫以低速開始。

ease-out     
// 動(dòng)畫以低速結(jié)束。

ease-in-out  
// 動(dòng)畫以低速開始和結(jié)束。

cubic-bezier(n,n,n,n)
// 在 cubic-bezier 函數(shù)中自己的值?？赡艿闹凳菑?0 到 1 的數(shù)值。

第四個(gè)參數(shù)：delay (animation-delay)

動(dòng)畫延遲執(zhí)行的時(shí)間，單位也是s或者ms。

第五個(gè)參數(shù)：times (animation-iteration-count)：

動(dòng)畫循環(huán)執(zhí)行的次數(shù)，無(wú)單位，infinite為無(wú)限循環(huán)。

第六個(gè)參數(shù)：iteration (animation-direction)

如果動(dòng)畫循環(huán)，循環(huán)的方式是：alternate(偶數(shù)次向前播放，奇數(shù)次向后播放)、normal(每次都向前播放)。

第七個(gè)參數(shù)：final (animation-fill-mode)：

動(dòng)畫的最后（達(dá)到100%）時(shí)的狀態(tài)，取值有：backwards（回到初始狀態(tài)）、forwards（停在最終狀態(tài)）、none、both。

both詳解：(根據(jù)animation-direction決定)
當(dāng)設(shè)置方向?yàn)榉捶较虻臅r(shí)候，根據(jù)動(dòng)畫執(zhí)行的次數(shù)判斷小球是否處于backwards還是forwards的狀態(tài)，以上代碼是執(zhí)行偶數(shù)次，動(dòng)畫來(lái)回運(yùn)動(dòng)，最終回到初始狀態(tài)極為backwards狀態(tài)，當(dāng)為奇數(shù)次時(shí)，則為結(jié)束狀態(tài)forwards狀態(tài)

.center{
    border: 1px solid #332;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: rgba(0,0,0,0.5);
    -webkit-animation:ani 1s ease-in 2 alternate both;
}
@-webkit-keyframes ani{
    0%{-webkit-transform:translateX(0);}
    50%{-webkit-transform:translateX(40px);}
    100%{-webkit-transform:translateX(100px);}
}

animation可以設(shè)置多組動(dòng)畫

.hr-3{
    -webkit-animation: zoomInUpHr 2s linear 19s 1 forwards, zoomOutUpHr 1s linear 25s 1 forwards;
}
// 1、動(dòng)畫延遲19s進(jìn)入zoomInUpHr動(dòng)畫(動(dòng)畫勻速播放持續(xù)2s)，播放一次后將停止在zoomInUpHr最終的狀態(tài)。2、動(dòng)畫延遲25s進(jìn)入zoomOutUpHr動(dòng)畫(動(dòng)畫勻速播放持續(xù)2s)，播放一次后將停止在zoomOutUpHr最終的狀態(tài)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/115372.html

相關(guān)文章

  • css3 動(dòng)畫（四）animation.css 源碼分析

    摘要：前言上一篇?jiǎng)赢嬋?jiǎn)介中只是簡(jiǎn)單的介紹了一下的子屬性，并沒(méi)有真正的使用。在本篇中，通過(guò)閱讀這個(gè)的動(dòng)畫庫(kù)，來(lái)加深對(duì)的屬性的理解。是一個(gè)具有非常多的動(dòng)畫效果的動(dòng)畫庫(kù)。動(dòng)畫效果演示用法加上基礎(chǔ)類以及動(dòng)畫類，就會(huì)有閃爍的動(dòng)畫效果。 前言 上一篇 css3 動(dòng)畫（三）animation 簡(jiǎn)介 中只是簡(jiǎn)單的介紹了一下 animation 的子屬性，并沒(méi)有真正的使用。在本篇中，通過(guò)閱讀 animate...

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

  • 基礎(chǔ)知識(shí)：css3核心知識(shí)整理

    摘要：前綴瀏覽器兼容根據(jù)了解，屬性大部分支持，部分支持，少部分支持前綴蘋果谷歌火狐瀏覽器世界之窗例如兼容轉(zhuǎn)換過(guò)渡關(guān)鍵幀動(dòng)畫轉(zhuǎn)換及以上支持，需添加前綴屬性的方法使用縮放軸縮放倍，軸縮放倍，只有一個(gè)值時(shí)為縮放倍數(shù)傾 css3前綴（瀏覽器兼容） 根據(jù)了解，css3屬性大部分支持ie10，部分支持ie9，少部分支持ie8 // 前綴 // -webkit- Safari and Chrome（...

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

  • 個(gè)人總結(jié)（css3新特性）

    摘要：要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容指定要添加效果的屬性指定效果的持續(xù)時(shí)間。當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值在最后一個(gè)關(guān)鍵幀中定義。在所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值在第一個(gè)關(guān)鍵幀中定義。 1.前言 css3這個(gè)相信大家不陌生了，是個(gè)非常有趣，神奇的東西！有了css3，js都可以少寫很多！我之前也寫過(guò)關(guān)于css3的文章，也封裝過(guò)css3的一些小動(dòng)畫。個(gè)人覺(jué)得css3不難，但...

    馬永翠 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<