CSS Animation Kit

sample  

animation

@keyframes

0%100%
Seconds
Seconds
 
%
CSS  |   HTML
 
Loading... tutorial | clear | download | save  
csshtml
 

CSS Animation Kit

In 6 minutes, you will learn animation creation with CSS. Basically CSS properties can change element style smoothly. CSS3 introduce two keywords for animation:
@keyframe and animation

(1) @keyframe has a collection of CSS style properties, mainly call timeline.
(2) animation property can control keyframes execution sequence like animation time, speed of animation, delay, direction etc.

Top panel of this tool has animation generator. There are some predefined animation as well. Select sample animation from top right corner. You can see @keyframes has stopper in the timeline. Below each stopper have some css properties like color, transform, opacity. Left side of panel control animation running flow.

You can run animation via generator panel or create your more custom code by using code editor and click 'Run Source' button.


comments powered by Disqus