CSS Generator - Animation
Code
.angry-animate{
-webkit-animation:change-color 4s ease 0s infinite normal;
-moz-animation:change-color 4s ease 0s infinite normal;
-ms-animation:change-color 4s ease 0s infinite normal;
animation:change-color 4s ease 0s infinite normal;
}
@-webkit-keyframes change-color {
0%{ background-color:green; }
100%{ background-color:red; }
}
@keyframes change-color {
0%{ background-color:green; }
100%{ background-color:red; }
}
Border
px
Border Radius
px
px
px
px
px
Box Shadow
Add more [+]
Background
%
%
%
px
px
px
Text Shadow
Add more [+]
Gradient
px
px
%
%
Add Stopper [+]
Transform
Transition
Animation
Image Filter
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.animation - animation property control the execution of keyframes.
@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: <NAME-OF-ANIMTION> <TOTAL-TIME> <TIMING> <START-DELAY> <REPEAT> <DIRECTION>
