CSS Animation Kit

animation

control @keyframes execution flow
duration
timing-function
delay
iteration-count
direction
fill-mode
  

@keyframes

css style for specific keyframe
0% X
100% X
0%100%

CSS properties allows us to change style of HTML element smoothly. CSS3 introduce two keywords for animation:
@keyframe and animation. Both properties can bind with any HTML element like text, div, span etc.

(1) @keyframe has a collection of CSS style properties. It is like a timeline of CSS styles.
(2) animation property can control keyframes execution sequence.

Select any predefined samples from top panel. Below samples there is a timeline of @keyframes. Timeline has 101 keyframes ( 0% to 100%) direction from left to right. Highlighted keyframe indicate that some style is assigned to that point. You can add new style at selected point.

animation properties
name: name of the animation.
duration: total running time of animation ( in seconds or milliseconds ).
timing-function: change the running speed ( slow start to fast end, fast to slow etc ).
delay: wait few seconds or milliseconds before animation start.
iteration-count: how many time repeat loop.
direction: run animation in normal or reverse direction.
fill-mode: any other style apply to element before animation start or after animation end.

resources