css3動畫-animation

標籤：style   blog   http   color   os   io   art   cti   

animation驅使一組css style變化到另外一組css style，它可以定義keyframes的集合，指定style的開始和結束狀態，它是transition的增強。

配置animation

animation-delay：從載入到開始執行的延遲

animation-direction：normal|reverse|alternate|alternate-reverse   參考

  normal：往前執行，完成後又回到原點

  reverse：和定義的方向相反，完成後回到原點開始執行

  alertnate：先往前到最後，又從最後往前執行，看上去比較順滑

animation-duration：期間


animation-iteration-count：重複次數（infinite 無限）

animation-name：@keyframes定義的名稱，描述每幀內元素的表現

animation-play-state：終止或者重新開始animation序列

animation-timing-function：定義運動曲線的function

animation-fill-mode：參考

用keyframes定義animation順序

定義一系列的keyframe來描述元素在被給的時間內應該怎麼表現。兩個最重要的狀態就是0%（最初狀態）和100%（終止狀態）別名是from和to，這兩個狀態是可選的，如果沒有指定，就用當前元素計算出來的值。

例子：

h1 {  -webkit-animation-duration: 3s;  -webkit-animation-name: slidein;}@-webkit-keyframes slidein {  from {    margin-left: 100%;    width: 300%;   }  to {    margin-left: 0%;    width: 100%;  }}

  <h1>Watch me move</h1>
  <p>This example shows how to use CSS animations to make <code>H1</code> elements move across the page.</p>

@keyframes定義了slidein，有兩個狀態0%和100%。最初狀態 margin-left: 100%;width: 300%，3s後margin-left:0%;width:100%;

animation事件

animationstart animation開始

animationend 結束

animationiteration 新的迴圈開始

事件有兩個屬性 animationName  和 elapsedTime（已耗用時間）