css animation 免程式動畫

清平調李白

雲想衣裳花想容
春風拂檻露華濃
若非群玉山頭見
會向瑤臺月下逢

—持續 10 秒—(google…等 webkit 瀏覽器應加 -webkit- 在 animation- 及 keyframes 前)

@keyframes anima{
 0%{
  transform:translateY(0);
  /*改變落下速度*/

  /**/
 }
 20%{
  transform:translateY(120%);
  /*改變彈起速度*/

  /**/
 }
 40%{
  transform:translateY(55%);
  /*改變落下速度*/

  /**/
 }
 60%{
  transform:translateY(120%);
  /*改變彈起速度*/

  /**/
 }
 80%{
  transform:translateY(95%);
  /*改變落下速度*/

  /**/
 }
 100%{
  transform:translateY(120%);
 }
}

easing 運算，模擬真實的速度感。 (複製，應以純文字貼上)

animation-timing-function:cubic-bezier(0.600, 0.040, 0.980, 0.335);/*落下*/

animation-timing-function:cubic-bezier(0.075, 0.820, 0.165, 1.000);/*彈起*/

html 5 App : easing 產生器