CSS Animations

CSS animations control the movement and appearance of elements on web pages. We can animate HTML elements without using JavaScript.

• Use @keyframes to define the animation steps.
• Apply animations with properties like animation-name and animation-duration.
• Control the animation flow using animation-timing-function and animation-delay.

CSS Animation Properties

@keyframes Rule

The @keyframes rule defines how an element's styles change over time during an animation.

• The .box class creates a blue square and applies the changeColor animation that lasts 3 seconds and repeats infinitely.
• The @keyframes changeColor rule changes the background color from blue to green.

Syntax: @keyframes animation-name 
{ from { /* Initial Styles */ }
 to 
{ /* Final Styles */ 
}}

• The from defines the starting styles, and to defines the ending styles.
• You can also use percentage values to specify intermediate steps.

animation-name Property

The animation-name property specifies the name of the @keyframes animation to apply to an element.

• The .box class applies the moveRight animation to the <div>.
• The animation-name links the element to the @keyframes moveRight sequence.
• The box moves horizontally from its original position to 200px to the right over 2 seconds, repeating infinitely.

Syntax: animation-name: animationName;

animation-timing-function property

The animation-timing-function property controls the speed curve of an animation, defining how the animation progresses over its duration.

• The .box class applies the slide animation to the <div>.
• The animation-timing-function: ease-in; makes the animation start slowly and then speed up.

Syntax:

animation-timing-function: timingFunction;

animation-delay property

The animation-delay property specifies a delay before an animation starts, controlling when the animation begins after being triggered.

• The .box element is set to fade in using the fadeIn animation.
• The animation-delay: 1s; delays the start of the animation by one second.
• The animation lasts for 2 seconds and repeats infinitely.

Syntax: animation-delay: time;

animation-iteration-count property

The animation-iteration-count property specifies how many times an animation should repeat.

• The .box element uses the bounce animation that lasts 2 seconds.
• animation-iteration-count: infinite; makes the animation loop endlessly.

Syntax: animation-iteration-count: number | infinite;

animation-direction property

The animation-direction property specifies whether an animation should play forward, backward, or alternate between the two directions.

• The .box element moves from its original position to 200px to the right.
• animation-direction: alternate; makes the animation play forward on the first iteration and then backward on the next, creating a back-and-forth motion.

Syntax: animation-direction: normal | reverse | alternate | alternate-reverse;

animation-fill-mode property

The animation-fill-mode property specifies how a CSS animation should apply styles to its target before and after it is executing.

• The .box element moves from its original position to 200px to the right over 3 seconds.
• animation-fill-mode: forwards; ensures that the box retains the final state of the animation after it completes.

Syntax: animation-fill-mode: none | forwards | backwards | both;

animation-play-state property

The animation-play-state property controls whether an animation is running or paused.

• The .box element has a spin animation that rotates it 360 degrees over 4 seconds infinitely.
• animation-play-state: paused; initially pauses the animation.

Syntax: animation-play-state: running | paused;

Animation Shorthand Property

The animation shorthand property allows you to set all animation-related properties in a single declaration, making your CSS code cleaner and more concise.

• The .box class uses the animation shorthand to apply the move animation.
• The animation lasts for 2 seconds, starts after a 1-second delay, runs infinitely, alternates direction, and retains the final state.
• The box moves from its original position to 200px to the right and changes color from blue to green smoothly.

Syntax:

animation: [animation-name] [animation-duration] [animation-timing-function] 
[animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode]
[animation-play-state];

Best Practices for CSS Animations

Here are some best practices listed below:

• Use Animations Purposefully: Apply animations to enhance user experience without causing distractions.
• Animate Performance-Friendly Properties: Prefer animating properties like transform and opacity for smoother performance.
• Ensure Accessibility: Provide options for users to reduce or disable animations to accommodate those with motion sensitivities.