VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
當前位置:
魔兽世界wow > 網站開發 > HTML >
  • css教程之animation-name [動畫名稱]

  • 2017-05-26 11:17 來源:未知

語法

animation-name: none | <identifier> [ , none | <identifier> ]*;定義一個或多個動畫名稱。
語法項目 說明
初始值 none
適用于 所有元素
可否繼承
媒介 視覺
版本 CSS3.0

說明

魔兽世界wow www.geyjm.icu 檢索或設置對象所應用的動畫名稱,必須與規則@keyframes配合使用,因為動畫名稱由@keyframes定義 如果提供多個屬性值,以逗號進行分隔。

如何開始進行動畫

@keyframes相當于一個命名空間,后面跟一個名詞,如果在class中的animation-name定義了與之對應的name,那么就可以執行動畫了。定義動畫時,簡單的動畫可以直接使用關鍵字from和to,即從一種狀態過渡到另一種狀態:如:


			
  1. @-webkit-keyframes demo{
  2.     from{left:0;}
  3.     to{left:400px;}
  4. }
復制

復雜動畫:


			
  1. @-webkit-keyframes demo{
  2.     0%{left:0;}
  3.     50%{left:200px;}
  4.     100%{left:400px;}
  5. }
復制

這里面的百分百有點像flash里幀的概念。表示設置某個時間段內任意時間點的樣式。

取值

none:不引用任何動畫名稱

identifier:定義一個或多個動畫名稱(identifier標識)

實例代碼

CSS

				
  1. .animation_name{
  2.     left:0;
  3.     top:100px;
  4.     position:absolute;
  5.     -webkit-animation:0.5s 0.5s ease infinite alternate;
  6.     -webkit-animation-name:demo;
  7.     -moz-animation:0.5s 0.5s ease infinite alternate;
  8.     -moz-animation-name:demo;
  9. }
  10. @-webkit-keyframes demo{
  11.     0%{left:0;}
  12.     100%{left:400px;}
  13. }
復制
HTML

				
  1. <div class="demo_box animation_name">看我沒事來回跑</div>
復制
運行一下 »     純CSS焦點圖效果 »

兼容性

IE Firefox Opera Safari Chrome
IE 10+ Firefox 3.5+ 目前暫無版本支持 Safari 10+ Chrome 2.0+

相關教程