Intro
And Animation is a moving image or an image that changes over an interval of time. CSSAnimations are the same but it’s the CSS styles that change over time, which in turn animates the DOM objects the styles affect.
Every animation has a start and end point, the animation updates style values between these two points. With some animations, CSS does the calculations between the two points.
Timing Functions
The simplest would be Linear time, where the value changes by a consistent rate per unit of time. But this is bland and doesn’t feel lively, most things in life ease in and out, and CSS has built in timing functions that support this.
CSS Transition
This is by far the easiest way, using the transition property.
Values:
- The CSS property to animate.
- The duration it takes in seconds or milliseconds.
.anim_class{
opacity: 0;
transition: opacity 200ms;
}
.anim_class:hover{
opacity: 1;
}CSS will handle the gradual transition of changing the opacity property for the anim_class class over 200ms automatically!
3. Additional value for time delay or one of CSS’s built-in functions or your own custom bezier using the cubic-bezier function.
Keframes
Keyframes are for animation independent of a selector like a class or id.
They’re annotated with @.
@keyframes best_anim{
from{
/*starting styles */
transform: rotate(0deg);
}
25%{
/* at the quarter mark apply these styles */
transform: rotate(37deg);
}
to{
/*ending styles */
transform: rotate(69deg);
}
}- Keyframes need a name
- Define starting styles in
from. - Define ending styles in
to. - Can define specific midpoints as percentages relevant to the duration of the animation’s length in seconds.
After the keyframe animation’s defined, we can reference it as an animation name in a selector.
.some_class{
animation: best_anim 10s;
}