CSS ANIMATIONS

What are CSS Animations?

CSS Animations are features that animate a gradual change in the style properties of an HTML element, without the use of JavaScript

How do you construct them?

HTML element (to animate) + CSS rule (that binds animation to element) + @keyframes

What are @keyframes?

They dictate when the styles of the animation change from start to finish

Popular Uses

• Fade in transition •
• Screen loading spinners •
• Loading (3 dots) •
• Scrolling text animation •
• Animated buttons •
• Floating effect for icon •
• Animated color effects

Tutorial for an Gradient Animation

1. Open a CSS page


2. Create a body element and set its background property to "linear-gradient"


3. Determine the slant percentage (angle of the colors) and the various hues of the gradient within the background section


4. Create the animation property, and set the time element to the duration of the gradient animation loop


5. Set the background-size property with percentages to account for responsive web design


6. Add and adjust the keyframes depending on how rapidly you want the gradient to progress



(Tweak with any percentages or keyframe values accordingly)