css animation keyframe

from: http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

CSS Syntax

@keyframes animationname {keyframes-selector {css-styles;}}

Property Values

Value	Description
animationname	Required. Defines the name of the animation.
keyframes-selector	Required. Percentage of the animation duration. Legal values: 0-100% from (same as 0%) to (same as 100%) Note: You can have many keyframes-selectors in one animation.
css-styles	Required. One or more legal CSS style properties

把 animation 設定檔放到 css 內

 forward, backward, infinite

div {

    width: 100px;

    height: 100px;

    background: red;

    position :relative;

    -webkit-animation: mymove 5s forwards; /* Chrome, Safari, Opera */ 

    animation: mymove 5s forwards;

}

keyframe 設定檔

/* Chrome, Safari, Opera */ 

@-webkit-keyframes mymove {

    0%   {top: 0px;}

    25%  {top: 200px;}

    75%  {top: 50px}

    100% {top: 100px;}

}

/* Standard syntax */

@keyframes mymove {

    0%   {top: 0px;}

    25%  {top: 200px;}

    75%  {top: 50px}

    100% {top: 100px;}

}