Css Module 17

  Module 17 : CSS Animations – Keyframe Animations, Animation Timing, and Animation Properties

CSS animations allow web developers to create smooth, visually appealing transitions and effects without relying on JavaScript or third-party libraries. This module provides a deep dive into CSS animations, covering keyframe animations, animation timing, and essential animation properties. It includes detailed explanations, practical examples, exercises, and guidance to help learners master CSS animations.

1. Introduction to CSS Animations

CSS animations enable the movement and transformation of elements over time using only CSS properties. There are two primary ways to create animations in CSS:

Transitions: Used for simple animations triggered by user interactions (e.g., hover).

Keyframe Animations: Used for complex animations that require more control over the movement of elements.

This module focuses on keyframe animations and related animation properties.

2. Keyframe Animations in CSS

A keyframe animation defines multiple steps in an animation sequence. The syntax follows this structure:

Syntax of @keyframes

@keyframes animationName {

0% {

     /* Starting state */

}

50% {

     /* Midway state */

}

100% {

     /* Ending state */

}

}

Example: Creating a Bouncing Ball Animation

Let's animate a ball to move up and down infinitely:

.ball {

width: 50px;

height: 50px;

background-color: red;

border-radius: 50%;

position: absolute;

bottom: 0;

animation: bounce 2s infinite ease-in-out;

}

@keyframes bounce {

0%, 100% {

     transform: translateY(0);

}

50% {

     transform: translateY(-200px);

}

}

Explanation:

0% and 100%: The ball is at its starting position.

50%: The ball moves 200px up.

animation: bounce 2s infinite ease-in-out;

bounce: The name of the keyframe animation.

2s: The animation duration.

infinite: The animation repeats indefinitely.

ease-in-out: The animation starts and ends slowly.

3. Animation Timing Functions

CSS provides various timing functions to control the speed of animation:

Function Description

linear Moves at a constant speed.

ease Starts slow, speeds up, then slows down. (default)

ease-in Starts slow, then speeds up.

ease-out Starts fast, then slows down.

ease-in-out Starts and ends slow, fast in the middle.

cubic-bezier(n,n,n,n) Custom timing function for precise control.

Example: Different Timing Functions on Boxes

.box {

width: 50px;

height: 50px;

background-color: blue;

margin: 10px;

animation: moveBox 3s infinite;

}

.linear { animation-timing-function: linear; }

.ease { animation-timing-function: ease; }

.ease-in { animation-timing-function: ease-in; }

.ease-out { animation-timing-function: ease-out; }

.ease-in-out { animation-timing-function: ease-in-out; }

@keyframes moveBox {

from { transform: translateX(0); }

to { transform: translateX(300px); }

}

This example applies different timing functions to different .box elements to observe their effects.

4. CSS Animation Properties

CSS animations have several properties to control their behavior:

1. animation-name

Defines the name of the @keyframes animation.

animation-name: bounce;

2. animation-duration

Sets how long the animation lasts.

animation-duration: 2s;

3. animation-timing-function

Controls the acceleration and deceleration of animation.

animation-timing-function: ease-in-out;

4. animation-delay

Delays the animation before it starts.

animation-delay: 1s;

5. animation-iteration-count

Specifies how many times the animation repeats (infinite for continuous looping).

animation-iteration-count: infinite;

6. animation-direction

Defines whether the animation plays normally, in reverse, or alternates:

Value Description

normal Plays from start to end.

reverse Plays from end to start.

alternate Plays forward, then reverses.

alternate-reverse Plays in reverse first, then forward.

animation-direction: alternate;

7. animation-fill-mode

Determines if the animation applies styles before and after execution:

Value Description

none Default behavior, no extra styling.

forwards Keeps the last keyframe state after animation ends.

backwards Applies first keyframe style before animation starts.

both Combines forwards and backwards.

animation-fill-mode: forwards;

8. animation shorthand

Instead of defining each property separately, use a shorthand notation:

animation: bounce 2s ease-in-out 1s infinite alternate;

Order: animation-name duration timing-function delay iteration-count direction fill-mode

5. Practical Exercises

Exercise 1: Create a Pulsing Button

Task: Animate a button to pulse when hovered.

.button {

background-color: blue;

color: white;

padding: 10px 20px;

border: none;

cursor: pointer;

font-size: 16px;

border-radius: 5px;

animation: pulse 2s infinite;

}

@keyframes pulse {

0% { transform: scale(1); }

50% { transform: scale(1.1); }

100% { transform: scale(1); }

}

Exercise 2: Loading Spinner

Task: Create a rotating loading spinner.

.loader {

width: 50px;

height: 50px;

border: 5px solid lightgray;

border-top: 5px solid blue;

border-radius: 50%;

animation: spin 1s linear infinite;

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

6. Summary and Best Practices

Use keyframes for complex animations.

Choose timing functions based on animation feel.

Use shorthand notation for cleaner code.

Avoid excessive animations to prevent performance issues.

Use animation-fill-mode: forwards; to keep the final state.

This module provides a complete guide with practical exercises to help students understand and apply CSS animations effectively. It is suitable for beginners and intermediate learners who want to enhance their web designs with smooth animations.