Complete Guide to CSS Animations.

Learn how to create engaging animations using only CSS

Introduction to CSS Animations.

CSS animations allow you to animate transitions from one CSS style configuration to another. They consist of two components: a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.

/* Basic animation syntax */ @keyframes example { from {background-color: red;} to {background-color: yellow;} } .element { animation-name: example; animation-duration: 4s; } 

Animation Properties.

CSS animations are controlled with several properties that define the animation's behavior:

• @keyframes: In this we add animation name and CSS properties, values.
• animation-name:Specifies the name of the @keyframes rule.
• animation-duration:Defines how long an animation should take to complete.
• animation-timing-function:Specifies the speed curve of the animation.
• animation-delay:Specifies a delay before the animation starts.
• animation-iteration-count:Defines how many times an animation should run.
• animation-direction:Specifies whether an animation should play in reverse on alternate cycles.
• animation-fill-mode:Specifies a style for the element when the animation is not playing.
• animation-play-state:Specifies whether the animation is running or paused.

The animation shorthand CSS property's default value is a combination of the default values of its individual sub-properties. Specifically, the default value for the animation property is:

Shorthand .element{ animation:name duration timing-function delay iteration-count direction fill-mode play-state;
}
👉 animation:none 0 ease 0 1 normal none running;

This expands to the following individual default values:

• animation-name: none (no animation is applied)
• animation-duration: 0s (animation plays instantly)
• animation-timing-function:ease (a slow start, then fast, then slow end)
• animation-delay:0s (animation starts immediately)
• animation-iteration-count:1 (animation plays once)
• animation-direction:normal (animation plays forwards)
• animation-fill-mode: none (styles are not applied before or after execution)
• animation-play-state:running (animation is playing)

Animation Name.

We use this property to name the animation.
Example👉 animation-name:PremiCoding;

What are CSS @keyframes?

CSS @keyframes allow you to create animations by defining styles at various points during the animation sequence. You specify what styles the element will have at certain times, and the browser fills in the transitions between those keyframes.

Syntax👉 @keyframes animation-name { from{/* Starting styles */} to {/* Ending styles */}} @keyframes animation-name{ 0%{/* Starting styles */} 100%{/* Ending styles */}} /* Or using percentages */ @keyframes animation-name { 0%{/* Styles at 0% */} 50%{/* Styles at 50% */} 100%{/* Styles at 100% */} }

CSS Animation Duration.

Setting the time limit for the animation to end. If we give animation duration 2s then animation will complete in 2seconds.Similarly, if we give animation duration 3s then the animation will be completed in 3 seconds.
Syntax👉 animation-duration:1s;

What are Timing Functions?

Timing functions (also known as easing functions) specify the rate of change of an animation over time. They allow you to make animations feel more natural by controlling acceleration and deceleration. Instead of moving at a constant speed (linear), objects in the real world accelerate, decelerate, and bounce. CSS timing functions help recreate these natural movements.

Timing Function Details.

ease 👉 Slow start, then fast, then slow end. This is the default value.
ease-in 👉 Slow start, fast end. The animation starts slowly and accelerates.
ease-out 👉 Fast start, slow end. The animation starts quickly and decelerates.
ease-in-out 👉 Slow start and end with faster middle. Similar to ease but more symmetrical.
steps() 👉 Divides the animation into specified number of steps. steps(5) creates 5 discrete steps.
cubic-bezier() 👉 Custom timing function defined by four values that form a Bezier curve.We can customize and use the cubic-bezier value to control the animation's speed according to our needs, such as where to make the animation speed up and where to slow it down. Using the cubic-bezier values, we can control whether the animation speed is slow or fast.When customizing the cubic-bezier value, it is essential to define four parameters, like this: cubic-bezier(n, n, n, n). To customize the cubic-bezier value, we must use values between 0 and 1.
linear 👉 Constant speed throughout the animation. No acceleration or deceleration.

CSS Animation Delay Property.

The CSS Animation delay property is used when the animation is to be played after a few seconds.

Animation Iteration Count

We use animation-intervention-count to count the animation.That means how many times do you want to repeat the animation.If we have to repeat the animation 5 times, you will write animation-iteration-count:5;this is how it will repeat the animation five times.If you want the animation to always keep repeating then you can use the infinite value.

CSS Animation Direction.

This property we use to set the direction of animation.Let us now learn about the values of animation-direction.
Normal👉 This is the default value of the CSS animation direction.
Alternate👉 From Alternate the animation first moves forward and then it comes back and then moves forward that is what keeps going on continuously.
Reverse👉 The animation moves from 100% to 0%. The animation moves from back to front.
alternate-reverse👉The animation first plays from back to front.And then moves forward.Again it moves from back to front.In the same way, the animation continues to run continuously. Meaning, in this, the animation first runs in reverse and then runs alternate.

CSS Animation Fill Mode.

none👉 this is a default value.The element will not retain any style values set by the animation. It will reset to its initial state before and after the animation.
forwards👉 The element will retain the style values from the last keyframe when the animation ends.
backwards👉 The element will retain the style values from the last keyframe when the animation ends.
both👉 The element will follow the rules for both forwards and backwards, extending the animation properties in both directions.

animation-play-state

running👉 running is a default value.This keeps the animation going.
poused👉 Using this value stops the animation.