CSS Transitions and Animations

CSS Transitions: transition-property, transition-duration, transition-timing-function

CSS Transitions enable you to smoothly animate changes to CSS property values over a specified duration, enhancing the visual interactivity and responsiveness of web interfaces.

What Are CSS Transitions?

CSS Transitions allow HTML elements to change property values gradually, rather than instantly, when triggered by events like :hover, :focus, or :active.

1. transition-property

Specifies the CSS property you want to animate.

transition-property: background-color;

You can target specific properties (like width, color, opacity) or use all to apply to every animatable property.

2. transition-duration

Defines how long the transition takes to complete.

transition-duration: 0.5s;

• Use seconds (s) or milliseconds (ms); shorter durations feel snappier, longer durations feel smoother.

3. transition-timing-function

Controls the speed curve of the transition (how the change progresses over time).

Common values:

• ease (default): starts slow, speeds up, then slows down
• linear: constant speed
• ease-in: starts slowly
• ease-out: ends slowly
• ease-in-out: starts and ends slowly
• cubic-bezier(x, y, z, w): custom curve

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

• Choose based on the feel you want—snappy, smooth, natural, or custom.

Complete Example

button {
background-color: blue;
color: white;
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}

button:hover {
background-color: green;
}

When the user hovers over the button, the background color changes smoothly over 0.3 seconds with easing.

Shorthand Syntax

You can combine all transition properties in one line:

transition: background-color 0.3s ease-in-out;

Or apply to multiple properties:

transition: background-color 0.3s ease, color 0.2s linear;

Summary Table:

Property	Purpose
transition-property	The property to animate
transition-duration	Duration of the transition
transition-timing-function	Speed pattern of the transition

Keyframe animations: animation-name, animation-duration, animation-timing-function

CSS Keyframe Animations allow you to create custom, multi-step animations by defining intermediate states (keyframes) and controlling their timing, sequence, and behavior using animation properties.

What Are Keyframe Animations?

Unlike transitions (which animate between two states), keyframe animations let you define multiple stages of an animation with precise control over how an element changes at specific points.

1. animation-name

Specifies the name of the keyframe sequence to apply.

Example:

@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.element {
animation-name: fadeIn;
}

• Use @keyframes to define the animation steps and link it with animation-name.

2. animation-duration

Sets how long the animation should take to complete one cycle.

.element {
animation-duration: 2s;
}

• Accepts time values in s (seconds) or ms (milliseconds).

3. animation-timing-function

Determines how the animation progresses through time (its acceleration curve).

Common Values:

• ease (default)
• linear
• ease-in
• ease-out
• ease-in-out
• cubic-bezier(n,n,n,n) for custom curves

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

• This affects how smooth or dynamic the animation feels.

Full Example:

@keyframes slideUp {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}

.box {
animation-name: slideUp;
animation-duration: 1.5s;
animation-timing-function: ease;
}

• This will animate the .box element sliding up into view with a fade-in effect over 1.5 seconds.

Shorthand Syntax

Combine multiple animation properties into a single line:

animation: slideUp 1.5s ease;

Summary Table:

Property	Purpose
animation-name	Binds the element to a @keyframes rule
animation-duration	Sets how long one animation cycle takes
animation-timing-function	Defines the pacing curve of the animation

Practical animation use cases: hover effects, slide-in animations

CSS animations are widely used to improve user experience, draw attention to UI elements, and add interactivity to web pages. Below are two popular and practical use cases: hover effects and slide-in animations.

1. Hover Effects (Interactive Animations)

Use Case: Enhance buttons, images, or links with visual feedback when hovered.

Example: Button Hover Zoom

.button {
padding: 12px 24px;
background-color: royalblue;
color: white;
border: none;
transition: transform 0.3s ease;
}

.button:hover {
transform: scale(1.1);
}

• This makes the button “grow” slightly on hover, signaling interactivity.

Example: Icon Color Change on Hover

.icon {
color: gray;
transition: color 0.3s ease;
}

.icon:hover {
color: crimson;
}

• Smooth color change on hover adds a dynamic, polished feel.

2. Slide-In Animations (Entrance Effects)

Use Case: Make elements enter the page from the side or bottom, often used in modals, menus, or scroll animations.

Example: Slide In from Left

@keyframes slideInLeft {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}

.sidebar {
animation: slideInLeft 0.8s ease-out forwards;
}

• The .sidebar slides in smoothly from the left when loaded.

Example: Slide In on Scroll (with JavaScript trigger)
CSS:

@keyframes slideInUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

.slide-element {
opacity: 0;
animation: slideInUp 0.6s ease-out forwards;
}

JavaScript to trigger when in view:

const element = document.querySelector(‘.slide-element’);

window.addEventListener(‘scroll’, () => {
if (element.getBoundingClientRect().top < window.innerHeight) {
element.classList.add(‘animate’);
}
});

• The element animates in when it comes into the viewport.

Summary:

Use Case	Description
Hover Effects	Immediate feedback, improves UI responsiveness and clarity
Slide-In	Engaging entrance effects for components or content
Scroll Animations	Enhance storytelling or draw attention dynamically

Would you like a live demo setup using HTML + CSS + JavaScript, or a practice challenge using these animations?