CSS3 animation 基礎

rose 發布于2019-08-30 13:11 / 1386人閱讀

摘要：最近項目有需求要做一個的頁面，涉及到的使用。中間的動畫過程由瀏覽器渲染引擎進行渲染。其中可以使用的時間段或者通過關鍵詞和，等價于和。動畫以低速開始，然后加快，在結束前變慢。動畫延遲進入動畫動畫勻速播放持續，播放一次后將停止在最終的狀態

最近項目有需求要做一個H5的頁面，涉及到CSS3 animation的使用。這里做了一個項目中的總結。

animation 基本用法

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

第一個參數：name (animation-name)

定義動畫的名字，CSS3定義采用" 關鍵幀[keyframes] "來定義動畫

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

對應不同的瀏覽器需要加前綴做兼容。

以上代碼的意義：定義了一個動畫名字叫fadeOut，0%代表動畫初，100%代表動畫末。中間的動畫過程由瀏覽器渲染引擎進行渲染。其中可以使用的時間段0%~100%,或者通過關鍵詞 "from" 和 "to"，等價于 0% 和 100%。

第二個參數：keeping-time (animation-duration)

整個動畫持續的時間，必須帶時間單位，s或者ms

第三個參數：animate-function (animation-timing-function)

運動方式的貝塞爾曲線，基本值

linear       
// 動畫從頭到尾的速度是相同的。

ease        
// 默認。動畫以低速開始，然后加快，在結束前變慢。 

ease-in      
// 動畫以低速開始。

ease-out     
// 動畫以低速結束。

ease-in-out  
// 動畫以低速開始和結束。

cubic-bezier(n,n,n,n)
// 在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。

第四個參數：delay (animation-delay)

動畫延遲執行的時間，單位也是s或者ms。

第五個參數：times (animation-iteration-count)：

動畫循環執行的次數，無單位，infinite為無限循環。

第六個參數：iteration (animation-direction)

如果動畫循環，循環的方式是：alternate(偶數次向前播放，奇數次向后播放)、normal(每次都向前播放)。

第七個參數：final (animation-fill-mode)：

動畫的最后（達到100%）時的狀態，取值有：backwards（回到初始狀態）、forwards（停在最終狀態）、none、both。

both詳解：(根據animation-direction決定)
當設置方向為反方向的時候，根據動畫執行的次數判斷小球是否處于backwards還是forwards的狀態，以上代碼是執行偶數次，動畫來回運動，最終回到初始狀態極為backwards狀態，當為奇數次時，則為結束狀態forwards狀態

.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可以設置多組動畫

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

GPU云服務器云服務器 animated anime animate Animating

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

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

css3 動畫（四）animation.css 源碼分析

摘要：前言上一篇動畫三簡介中只是簡單的介紹了一下的子屬性，并沒有真正的使用。在本篇中，通過閱讀這個的動畫庫，來加深對的屬性的理解。是一個具有非常多的動畫效果的動畫庫。動畫效果演示用法加上基礎類以及動畫類，就會有閃爍的動畫效果。前言上一篇 css3 動畫（三）animation 簡介中只是簡單的介紹了一下 animation 的子屬性，并沒有真正的使用。在本篇中，通過閱讀 animate...

ThreeWords 2019-08-29 16:05 評論0 收藏0
基礎知識：css3核心知識整理

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

kycool 2019-08-30 15:55 評論0 收藏0
個人總結（css3新特性）

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

馬永翠 2019-08-29 13:12 評論0 收藏0