您現在的位置是:電腦技術吧?>? 基礎知識 ??>??animation屬性,animation的屬性及其意思??>??正文詳情

animation屬性,animation的屬性及其意思

公良嘉運2019-11-15 17:41:09 人圍觀
簡介animation元素一、動畫語法1,@key frames插入關鍵幀(1)form to form:CSS code復制內容到剪貼板@keyframes demo{from{proanimation教程

一、animation的語法   1、@keyframes插入關鍵幀  (1)FormTo形式:  CSS Code復制內容到剪貼板  @keyframes demo {  from {  Properties:Properties value;  }  Percentage {  Properties:Properties value;  }  to {  Properties:Properties value;  }  }  (2)百分比的形式:  CSS Code復制內容到剪貼板  @keyframes demo {  0% {  Properties:Properties value;  }  Percentage {  Properties:Properties value;  }  100% {  Properties:Properties value;  }  }  2、animation-name定義動畫的名稱  animation-name: none | 動畫的名稱;  (1)動畫的名稱是由Keyframes創建的動畫名,這里必須和創建的動畫名保持一致。

如果不一致,將不能實現任何動畫效果  (2)none為默認值,當值為none時,將沒有任何動畫效果  3、animation-duration  animation-duration: time (s)  animation-duration是指定元素播放動畫所持續的時間,取值為數值,單位為秒(s),其默認值為0。

  4、animation-timing-function  animation-timing-function:ease(緩沖) || ease-in(加速) || ease-out(減速) || ease-in-out(先加速后減速) || linear(勻速) || cubic-bezier(自定義一個時間曲線)  animation-timing-function是用來指定動畫的播放方式,具有以下六種變換方式:ease(緩沖);ease-in(加速);ease-out(減速);ease-in-out(先加速后減速);linear(勻速);cubic-bezier(自定義一個時間曲線)。

  5、animation-delay  animation-delay: time(s)  animation-delay:是用來指定元素動畫開始時間。

取值為數值,單位為秒(s),其默認值為0。

這個屬性和animation-duration使用方法是一樣的。

  6、animation-iteration-count  animation-iteration-count:infinite || number  animation-iteration-count是指定元素播放動畫的循環次數,其取值為數字,默認值為1或者infinite(無限次數循環)。

  7、animation-direction  animation-direction: normal || alternate  animation-direction是指定元素動畫播放的方向,如果是normal,那么動畫的每次循環都是向前播放;如果是alternate,那么動畫播放在第偶數次向前播放,第奇數次向反方向播放。

  8、animation-play-state  animation-play-state:running || paused  animation-play-state主要是用來控制元素動畫的播放狀態。

其主要有兩個值,running和paused,其中running為默認值。

這個屬性目前很少內核支持,所以只是稍微提一下。

  二、animation事件接口  其實目前基本的就是三個事件而已:開始、迭代、結束。

開始和結束都知道是什么意思。

至于這個迭代,由于animation中有個iteration-count屬性,它可以定義動畫重復的次數,因此動畫會有許多次開始和結束。

但是真正的開始和結束事件是關于整個動畫的,他們只會觸發一次,而中間由于重復動畫引起的結束并開始下一次將觸發整個迭代事件。

  這三個事件的標準名稱是:  開始:animationstart  迭代:animationiteration  結束:animationend  但是目前版本的Chrome需要加上webkit前綴,而且還要注意大小寫  開始:webkitAnimationStart  迭代:webkitAnimationIteration  結束:webkitAnimationEnd  最后是實例代碼和截圖 CSS Code復制內容到剪貼板

  1. style @-webkit-keyframes test {
  2. 0% {background:red;} 25% {background:green;}
  3. 50% {background:blue;} 100% {background:red;}
  4. } @keyframes test {
  5. 0% {background:red;} 25% {background:green;}
  6. 50% {background:blue;} 100% {background:red;}
  7. } /style
  8. script onload=function(){
  9. var html=document.documentElement; //定義事件回調函數
  10. var start=function(){ console.log(start);
  11. },iteration=function(e){ console.log(e);
  12. },end=function(){ console.log(end);
  13. }; //綁定事件
  14. html.addEventListener(webkitAnimationIteration,iteration); html.addEventListener(animationiteration,iteration);
  15. html.addEventListener(webkitAnimationStart,start); html.addEventListener(animationstart,start);
  16. html.addEventListener(webkitAnimationEnd,end); html.addEventListener(animationend,end);
  17. //開始執行動畫 html.style.animation=
  18. html.style.WebkitAnimation= test 1s linear 0s 3;
  19. }; /script

版權聲明:本文由 公良嘉運 整理編輯。

原標題:animation里,animation怎么用

轉載注明出處:http://www.dn9ww09s.icu/basics/12568.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦過熱關機,電腦總是過熱關機

    電腦過熱關機,電腦總是過熱關機 相關圖片筆記本頻繁過熱關機谷歌的親兒子系列Google pixel 3于2018年10月9日發布。谷歌Pixel3的售后服務經常出現一些漏洞。近日,谷歌Pixel3被曝光存在問題。一些用電腦過熱關機要等多久...

  • 心形圖案,qq分組圖案玫瑰心形

    心形圖案,qq分組圖案玫瑰心形 相關圖片qq桃心圖案渲染:提示:將代碼復制到HTML文件并保存。直接打開看效果。實現代碼:代碼如下:!Doctypehtmlhtmlheadmeta charset=gbktitlqq愛心圖案...

  • 收到查找iphone已禁用啥意思,蘋果id不能用了怎么辦

    收到查找iphone已禁用啥意思,蘋果id不能用了怎么辦 相關圖片蘋果id被別人登錄怎么辦iPhone上的許多操作都離不開蘋果ID,但有些人被盜,有些人操作不當,導致蘋果ID被禁用。在這種情況下我們該怎么辦?如果由于安全原因而鎖定了Apple ID,蘋果...

  • 自定義屬性,自定義屬性在哪

    自定義屬性,自定義屬性在哪 相關圖片css自定義屬性當然,高級瀏覽器可以通過腳本定義和訪問數據。在項目實踐中非常有用。例如,代碼如下:div id=user data uid=12345 data uname=hhtml5自定義屬性...

  • project激活碼,project2010激活碼

    project激活碼,project2010激活碼 相關圖片project激活教程一些用戶不熟悉Project2010。Project 2010是微軟公司開發并銷售的一款項目管理軟件,全稱為microsoftproject2010。作為微軟的project2010如何激活...

  • icloud云備份有什么用,icloud 云備份

    icloud云備份有什么用,icloud 云備份 相關圖片icloud云備份是默認打開的嗎Icloud云備份可以幫助我們備份應用數據、通話記錄、IMessage信息、短信、彩信、照片和視頻等,是一項非常實用的功能,我們在恢復出廠設置或更換機器時經常...

  • 渲染性能,優化渲染為性能

    渲染性能,優化渲染為性能 相關圖片渲染cpu推薦編寫CSS的習慣決定了頁面呈現的速度,這在大腦受損的ie中更為明顯。養成良好的習慣,甚至形成一個標準,會使你的頁面加載速度更快,用戶體驗更高。這里有一些方法來提...

  • 199電信卡收不到驗證碼,199號段有些軟件不認

    199電信卡收不到驗證碼,199號段有些軟件不認 相關圖片199號碼無法注冊一些手機用戶在網上選擇號碼時發現199段,這與之前很多用戶選擇的號碼段不同。199段有自己的首選號碼,所以他們首先要進入pit,我們需要知道199段是中國電信最199號...

  • 網頁設計css教程,網頁制作css

    網頁設計css教程,網頁制作css 相關圖片htmlcss網頁設計實例一。使用CSS縮寫可以幫助減小CSS文件的大小,使其更易于閱讀。CSS縮寫的主要規則請參見“CSS基本語法”2。明確定義單元,除非0的值忘記定義單元的大小是CShtml css...

  • 運營商設置必要更新嗎,蘋果怎么關掉運營商更新提示

    運營商設置必要更新嗎,蘋果怎么關掉運營商更新提示 相關圖片蘋果xr運營商設置更新有時你的iPhone會跳出關于更新運營商設置的提示。其實,這很簡單。這相當于運營商在網絡中有一個版本更新。一般來說,它可以更新新的功能或優化信號和網絡速...

熱評文章

  • 獨立顯卡怎么接顯示器,獨立顯卡接顯示器沒顯示

    獨立顯卡怎么接顯示器,獨立顯卡接顯示器沒顯示 相關圖片獨立顯卡接口我們使用的大多數普通計算機都是集成顯卡。當用戶開始顯示或擁有具有獨特顯示的主機以獲得更好的體驗時,則不需要將顯示器連接到集成顯卡端口。那么顯示器是如何...

  • 谷歌三件套一鍵下載,谷歌三件套干嘛的

    谷歌三件套一鍵下載,谷歌三件套干嘛的 相關圖片谷歌三件套指的是經常拋售Android手機的用戶可以聽到更多關于Google三件套的消息,但剛剛聯系的用戶并不十分清楚。谷歌的三件套是什么?谷歌三件套有什么用?Google的三qooapp下載安卓...

  • video事件,video屬性和事件

    video事件,video屬性和事件 相關圖片數據挖掘應用實例一。獲取視頻時間長度。當視頻加載到視頻中時,使用onloaded metadata事件獲取視頻時間長度。代碼如下:視頻。Onloadedmetadata=funAjax應用...

  • 喜馬拉雅聽下載到電腦,喜馬拉雅fm怎么下載到電腦

    喜馬拉雅聽下載到電腦,喜馬拉雅fm怎么下載到電腦 相關圖片喜馬拉雅聲音下載到電腦大多數喜歡聽的朋友都會選擇喜馬拉雅聽力應用。喜馬拉雅聽書是用手機,所以你可以隨時隨地聽書,這是非常方便的,但是有些人花更多的時間在電腦前,他...

  • 為什么圖片預覽不出來,圖片沒有預覽怎么辦

    為什么圖片預覽不出來,圖片沒有預覽怎么辦 相關圖片圖片預覽是什么意思HTML5圖像預覽需要兩種方法:1。網址2。文件讀取器直接編碼!Doctypehtmlhtmlheadometacharset=utf-8titlehtml5圖懷舊影苑新圖片...

  • 手機掉水里一定壞嗎,手機掉水里照樣能用

    手機掉水里一定壞嗎,手機掉水里照樣能用 相關圖片手機掉水里一定會進水嗎我們都很珍惜自己的手機,但有時我們在生活中卻不注意手機,讓手機掉進水里。當你心愛的手機掉進水里,我們該怎么辦?一。當你看到它掉進水里時,不要...

  • 私有倉庫搭建,私有helm倉庫搭建

    私有倉庫搭建,私有helm倉庫搭建 相關圖片maven私有倉庫一。Docker registry描述了本文中記錄的設置Docker注冊表的完整操作過程。雖然官方提供dockerhub作為一個開放的集中倉庫,但可以想象,中國nexus 搭建 私有倉庫...

  • 手機如何打省略號,O上邊有個省略號怎么打

    手機如何打省略號,O上邊有個省略號怎么打 相關圖片縮略號怎么打省略號是我們在聊天和文檔輸入中經常使用的符號。當你想用省略號的時候,你怎么打?一。打開輸入法,注意輸入法應為中文標點狀態,而不是英文標點狀態2。按鍵盤什...

  • divcss,divcss布局模板

    divcss,divcss布局模板 相關圖片css本文以div CSS為例,實現了豬八戒首頁的導航菜單效果。與您分享以供參考。具體內容如下:這是模仿2010年豬八戒首頁的頁面導航菜單。它的藍色風格,非常漂亮,大什么是css...

  • 雙卡雙待單通優缺點,雙卡雙待單通怎么切換

    雙卡雙待單通優缺點,雙卡雙待單通怎么切換 相關圖片打電話單通是什么意思除了Android系統的開放性外,很多手機用戶之所以選擇小米移動,是因為Android具有雙卡雙備的功能。不過,有些用戶會了解更多。一些Android手機支持雙僅a卡上網...

關注微信

变脸官网查询