Siege's Projects

Home Assets Projects

CSS Animations

I have been working on my knowledge on CSS animations. For instance, Rainbows! The @Keyframes CSS Tag makes this all possible

It is actually very easy to make CSS animations, and once you know multiple CSS tags already, the sky is the limit.

The easiest way to implement this feature is with the @keyframes blank {from {blank:blank} to {blank:blank}} although it is the most limited way. The other way, which is harder, is with percentages. For a full animation that is equal for each frame you will have to divide it into 100, then multiply that for each frame, for instance @keyframes RGB { 0% {color:red;}20% {color:orange;}40% {color:yellow;}60% {color:green;}80% {color:blue;}100% {color:violet;} }

Now that you have the actual animation, you need a way to incorperate the animation into, lets say a span. The way to do that is with some more normal tags. span.RGB { animation-name:RGB;animation-iteration-count:infinite;animation-duration:3s; }Iteration being the amount of times the animation is played, duration meaning how long the animation plays, and the name, is the name.