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
- Open a CSS page

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

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

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

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

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

(Tweak with any percentages or keyframe values accordingly)