摘要:最近項目有需求要做一個的頁面,涉及到的使用。中間的動畫過程由瀏覽器渲染引擎進行渲染。其中可以使用的時間段或者通過關鍵詞和,等價于和。動畫以低速開始,然后加快,在結束前變慢。動畫延遲進入動畫動畫勻速播放持續(xù),播放一次后將停止在最終的狀態(tài)
最近項目有需求要做一個H5的頁面,涉及到CSS3 animation的使用。這里做了一個項目中的總結。
animation 基本用法
animation : [name] [keeping-time] [animate-function] [delay] [times] [iteration] [final]
第一個參數(shù):name (animation-name)
定義動畫的名字,CSS3定義采用" 關鍵幀[keyframes] "來定義動畫
@keyframes fadeOut{ 0% { opacity : 1} 100% { opacity : 0} }
對應不同的瀏覽器需要加前綴做兼容。
以上代碼的意義:定義了一個動畫名字叫fadeOut,0%代表動畫初,100%代表動畫末。中間的動畫過程由瀏覽器渲染引擎進行渲染。其中可以使用的時間段0%~100%,或者通過關鍵詞 "from" 和 "to",等價于 0% 和 100%。
第二個參數(shù):keeping-time (animation-duration)
整個動畫持續(xù)的時間,必須帶時間單位,s或者ms
第三個參數(shù):animate-function (animation-timing-function)
運動方式的貝塞爾曲線,基本值
linear // 動畫從頭到尾的速度是相同的。 ease // 默認。動畫以低速開始,然后加快,在結束前變慢。 ease-in // 動畫以低速開始。 ease-out // 動畫以低速結束。 ease-in-out // 動畫以低速開始和結束。 cubic-bezier(n,n,n,n) // 在 cubic-bezier 函數(shù)中自己的值。可能的值是從 0 到 1 的數(shù)值。
第四個參數(shù):delay (animation-delay)
動畫延遲執(zhí)行的時間,單位也是s或者ms。
第五個參數(shù):times (animation-iteration-count):
動畫循環(huán)執(zhí)行的次數(shù),無單位,infinite為無限循環(huán)。
第六個參數(shù):iteration (animation-direction)
如果動畫循環(huán),循環(huán)的方式是:alternate(偶數(shù)次向前播放,奇數(shù)次向后播放)、normal(每次都向前播放)。
第七個參數(shù):final (animation-fill-mode):
動畫的最后(達到100%)時的狀態(tài),取值有:backwards(回到初始狀態(tài))、forwards(停在最終狀態(tài))、none、both。
both詳解:(根據animation-direction決定)
當設置方向為反方向的時候,根據動畫執(zhí)行的次數(shù)判斷小球是否處于backwards還是forwards的狀態(tài),以上代碼是執(zhí)行偶數(shù)次,動畫來回運動,最終回到初始狀態(tài)極為backwards狀態(tài),當為奇數(shù)次時,則為結束狀態(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可以設置多組動畫
.hr-3{ -webkit-animation: zoomInUpHr 2s linear 19s 1 forwards, zoomOutUpHr 1s linear 25s 1 forwards; } // 1、動畫延遲19s進入zoomInUpHr動畫(動畫勻速播放持續(xù)2s),播放一次后將停止在zoomInUpHr最終的狀態(tài)。2、動畫延遲25s進入zoomOutUpHr動畫(動畫勻速播放持續(xù)2s),播放一次后將停止在zoomOutUpHr最終的狀態(tài)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115372.html
摘要:前言上一篇動畫三簡介中只是簡單的介紹了一下的子屬性,并沒有真正的使用。在本篇中,通過閱讀這個的動畫庫,來加深對的屬性的理解。是一個具有非常多的動畫效果的動畫庫。動畫效果演示用法加上基礎類以及動畫類,就會有閃爍的動畫效果。 前言 上一篇 css3 動畫(三)animation 簡介 中只是簡單的介紹了一下 animation 的子屬性,并沒有真正的使用。在本篇中,通過閱讀 animate...
摘要:前綴瀏覽器兼容根據了解,屬性大部分支持,部分支持,少部分支持前綴蘋果谷歌火狐瀏覽器世界之窗例如兼容轉換過渡關鍵幀動畫轉換及以上支持,需添加前綴屬性的方法使用縮放軸縮放倍,軸縮放倍,只有一個值時為縮放倍數(shù)傾 css3前綴(瀏覽器兼容) 根據了解,css3屬性大部分支持ie10,部分支持ie9,少部分支持ie8 // 前綴 // -webkit- Safari and Chrome(...
摘要:要實現(xiàn)這一點,必須規(guī)定兩項內容指定要添加效果的屬性指定效果的持續(xù)時間。當動畫完成后,保持最后一個屬性值在最后一個關鍵幀中定義。在所指定的一段時間內,在動畫顯示之前,應用開始屬性值在第一個關鍵幀中定義。 1.前言 css3這個相信大家不陌生了,是個非常有趣,神奇的東西!有了css3,js都可以少寫很多!我之前也寫過關于css3的文章,也封裝過css3的一些小動畫。個人覺得css3不難,但...
閱讀 2200·2021-11-22 11:56
閱讀 2647·2021-10-08 10:05
閱讀 7772·2021-09-22 15:53
閱讀 1910·2021-09-22 15:29
閱讀 2233·2021-09-08 09:35
閱讀 3353·2021-09-07 10:12
閱讀 1379·2019-08-30 13:11
閱讀 1968·2019-08-28 17:54