Experimenting with CSS3 – Keyframe Animation

Experimenting with CSS3 – Keyframe Animation

Animation is currently possible in languages like SVG, but no system exists for the native animation of CSS styles.
The new proposal for CSS3 standards introduce defined animations, which specify the values that CSS properties will take over a given time interval.

How to do this?

Animation is done using the @keyframes selector. The keframe definition will contain the initial stage and final stage of the object. If finer control of the intermediate values is required, the ‘percentage’ keyframe-selector can be used.

Syntax

@keyframes <identifier> {

/* ‘from ‘ is equailent to writing 0%. So for more control in animation you can use key-frame selectors as 0%, 1%, 10% … 100% */
from {

  selector:value;
  selector:value;
}
/* ‘to’ is equailent to writing 100%. */
to {
  selector:value;
  selector:value;
}

}

Example

@keyframes flybird {
0%        { left:0px;    top:200px }
    50%        { top:100px;}
    100%     { top:200px; }
}

@keyframes flybird {
from        { left:0px;    top:200px;  }
to     { top:200px; }
}

Try the demo to see how things work.

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>