CSS Generator - Animation

       
save | reset
Code

Border

px
 


Border Radius

px
 

px
px
px
px

Box Shadow

 

Add more [+]

Background




keyword  
% (percent)  
px (pixel)

%
%
px
px

Text Shadow

 

Add more [+]

Gradient

px px
% %



Add Stopper [+]

Transform





 



Transition


Image Filter

Animation

 


function

CSS Animation Generator

CSS3 style properties allows you to change transition smoothly. @keyframes and animation keywords are sufficient to do animations.

@keyframes - every animation has a sequence of frames where each frame display one by one which looks like running animation. CSS @keyframes is a container of frames.

@keyframes <NAME-OF-ANIMTION>{
<KEY-POSITION> { <CSS-STYLE> }
}
animation - animation property control the execution of keyframes.
animation: <NAME-OF-ANIMTION> <TOTAL-TIME> <TIMING> <START-DELAY> <REPEAT> <DIRECTION>


comments powered by Disqus