css animations

What is it?

CSS animations let you animate from one style to another. Like traditional animation, keyframes are utilized and can be used to manipulate properties such as transformations, transitions, timing, repeats, and more.

Advantages to CSS Animations

They're easy to use for simple animations; you can create them without even having to know JavaScript. They also run well, even under a moderate system load and can be powerful tool to improve userexperience and site design.

Building Block #1: Keyframes

Keyframes define what the animation looks like at each stage of the animation timeline. Each @keyframe is composed of:

Name of the animation: A name that describes the animation, for example, bounceIn.
Stages of the animation: Each stage of the animation is represented as a percentage. 0% represents the beginning state of the animation. 100% represents the ending state of the animation. Multiple intermediate states can be added in between.
CSS Properties: The CSS properties defined for each stage of the animation timeline.

@keyframes bounceIn {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}

Building Block #2: Animation Properties

Animation properties do two things:

They assign the @keyframes to the elements that you want to animate.
They define how it is animated.

You must add the following two animation properties for the animation to take effect:

animation-name: The name of the animation, defined in the @keyframes.
animation-duration: The duration of the animation, in seconds (e.g., 5s) or milliseconds (e.g., 200ms)

div {
animation-duration: 2s;
animation-name: bounceIn;
}

Additional Animation Properties

animation-delay

Configures the delay between the time the element is loaded and the beginning of the animation sequence. The syntax animation-delay: 2s; tells this circle to react two seconds after a :hover .

animation-direction

Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.

animation-duration

Configures the length of time that an animation should take to complete one cycle. (the example below has a duration of 5s, where as this one is 2s)

animation-iteration-count

Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely (as seen above). This one however has an iteration of 3, when hovered on.

animation-play-state

Lets you pause and resume the animation sequence. Very helpful with :hover as sometimes a glitch effect can occur when element abruptly snaps back into it's original state. An animation-play-state: paused; and just change it on :hover to animation-play-state: running;.

animation-timing-function

Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves. This animation uses animation-timing-function: linear; to express the same speed from start to end

animation-fill-mode

Configures what values are applied by the animation before and after it is executing. When we define it with a forward; value, we are telling the browser that we want our animated element as defined in the last keyframe. This way, we don’t get that final jump back to the initial state of the element before it started animating

CSS Animations