CSS Transitions

Name: CSS Transitions
Availability: InStock
Author: Revochamp

What are CSS Transitions?

CSS transitions allow you to change property values smoothly over a specified duration. They are commonly used for hover effects, focus states, and interactive UI feedback without JavaScript.

Basic Syntax

CSSRead-only

button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: darkblue;
}

button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: darkblue;
}

Transition Properties

Property	Description	Example
transition-property	Which CSS property to animate	background-color, width, transform
transition-duration	How long the transition takes	0.5s, 300ms
transition-timing-function	Speed curve of the transition	ease, linear, ease-in-out
transition-delay	Delay before transition starts	0.2s

Timing Functions

CSSRead-only

.ease {
  transition-timing-function: ease; /* slow start, fast middle, slow end */
}

.linear {
  transition-timing-function: linear; /* constant speed */
}

.ease-in {
  transition-timing-function: ease-in; /* slow start */
}

.ease-out {
  transition-timing-function: ease-out; /* slow end */
}

.ease-in-out {
  transition-timing-function: ease-in-out; /* slow both ends */
}

.custom {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.ease {
  transition-timing-function: ease; /* slow start, fast middle, slow end */
}

.linear {
  transition-timing-function: linear; /* constant speed */
}

.ease-in {
  transition-timing-function: ease-in; /* slow start */
}

.ease-out {
  transition-timing-function: ease-out; /* slow end */
}

.ease-in-out {
  transition-timing-function: ease-in-out; /* slow both ends */
}

.custom {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

Shorthand Syntax

CSSRead-only

/* property duration timing-function delay */
.element {
  transition: all 0.3s ease 0s;
}

/* multiple properties */
.element {
  transition: background 0.2s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* property duration timing-function delay */
.element {
  transition: all 0.3s ease 0s;
}

/* multiple properties */
.element {
  transition: background 0.2s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

Common Transition Examples

CSSRead-only

/* Button hover scale */
.button {
  transition: transform 0.2s ease;
}
.button:hover {
  transform: scale(1.05);
}

/* Opacity fade */
.element {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.element.visible {
  opacity: 1;
}

/* Width expansion */
.sidebar {
  width: 60px;
  transition: width 0.3s ease-in-out;
}
.sidebar:hover {
  width: 200px;
}

/* Button hover scale */
.button {
  transition: transform 0.2s ease;
}
.button:hover {
  transform: scale(1.05);
}

/* Opacity fade */
.element {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.element.visible {
  opacity: 1;
}

/* Width expansion */
.sidebar {
  width: 60px;
  transition: width 0.3s ease-in-out;
}
.sidebar:hover {
  width: 200px;
}

Which Properties Can Be Animated?

Colors – color, background-color, border-color
Box Model – width, height, margin, padding, border-width
Positioning – top, right, bottom, left
Transforms – scale, rotate, translate, skew
Opacity & Visibility – opacity, visibility
Shadows & Filters – box-shadow, text-shadow, filter

Transition vs Animation

Feature	Transition	Animation
Trigger	State change (hover, focus)	Can run automatically
Iterations	Once per state change	Infinite possible
Keyframes	No	Yes (@keyframes)
Complexity	Simple property changes	Multi-step sequences
Use case	Hover effects, interactive feedback	Loaders, continuous motion

Practical Card Example

CSSRead-only

.card {
  width: 250px;
  padding: 20px;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.card img {
  transition: opacity 0.2s ease;
}

.card:hover img {
  opacity: 0.9;
}

.card {
  width: 250px;
  padding: 20px;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.card img {
  transition: opacity 0.2s ease;
}

.card:hover img {
  opacity: 0.9;
}

Best Practices

Use transforms for position changes – Better performance than animating top/left
Prefer opacity over visibility – Smoother and GPU-accelerated
Keep durations short – 0.2s–0.5s for most UI interactions
Avoid animating layout properties – width, height, margin trigger reflows
Test on mobile devices – Ensure 60fps performance

Common Mistakes

Animating all properties – Use transition: all sparingly (performance)
Too long durations – Annoying for users (avoid > 1s for UI)
Inconsistent delays – Creates disjointed experiences
Forgetting to set initial state – Transition needs start and end values

Conclusion

CSS transitions provide an easy way to add polish and interactivity to your websites. They improve user experience through subtle motion feedback and are widely supported across all modern browsers.

.box { width: 100px; height: 100px; background: steelblue; transition: transform 0.3s ease, background 0.2s ease; } .box:hover { transform: scale(1.1) rotate(5deg); background: darkblue; }

Test Your Knowledge

of 4

Which property defines how long a transition takes?

transition-delay

transition-duration

transition-timing

transition-speed

of 4

Which timing function has constant speed?

ease

ease-in

linear

cubic-bezier

of 4

Which property should you animate for better performance?

width

margin

transform

font-size

of 4

What is the shorthand order?

duration property delay timing

property duration timing delay

property timing duration delay

delay property duration timing

Frequently Asked Questions

What is the difference between transition and animation?

Transitions are triggered by state changes (like hover), while animations can run automatically and support multi-step keyframes.

Can I transition from display: none?

No, display property cannot be transitioned. Use opacity and visibility instead for fade effects.

What's the best timing function for hover effects?

ease or ease-out are generally best for hover effects as they feel natural and responsive.

How do I transition multiple properties?

Use comma-separated transitions: transition: opacity 0.2s, transform 0.3s ease;

Property

Description

Example

transition-property

Which CSS property to animate

background-color, width, transform

transition-duration

How long the transition takes

0.5s, 300ms

transition-timing-function

Speed curve of the transition

ease, linear, ease-in-out

transition-delay

Delay before transition starts

0.2s

.ease { transition-timing-function: ease; /* slow start, fast middle, slow end */ } .linear { transition-timing-function: linear; /* constant speed */ } .ease-in { transition-timing-function: ease-in; /* slow start */ } .ease-out { transition-timing-function: ease-out; /* slow end */ } .ease-in-out { transition-timing-function: ease-in-out; /* slow both ends */ } .custom { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* property duration timing-function delay */ .element { transition: all 0.3s ease 0s; } /* multiple properties */ .element { transition: background 0.2s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1); }

/* Button hover scale */ .button { transition: transform 0.2s ease; } .button:hover { transform: scale(1.05); } /* Opacity fade */ .element { opacity: 0; transition: opacity 0.5s ease; } .element.visible { opacity: 1; } /* Width expansion */ .sidebar { width: 60px; transition: width 0.3s ease-in-out; } .sidebar:hover { width: 200px; }

Feature

Transition

Animation

Trigger

State change (hover, focus)

Can run automatically

Iterations

Once per state change

Infinite possible

Keyframes

Yes (@keyframes)

Complexity

Simple property changes

Multi-step sequences

Use case

Hover effects, interactive feedback

Loaders, continuous motion

.card { width: 250px; padding: 20px; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-8px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); } .card img { transition: opacity 0.2s ease; } .card:hover img { opacity: 0.9; }

.box { width: 100px; height: 100px; background: steelblue; transition: transform 0.3s ease, background 0.2s ease; } .box:hover { transform: scale(1.1) rotate(5deg); background: darkblue; }

Test Your Knowledge

of 4

Which property defines how long a transition takes?

transition-delay

transition-duration

transition-timing

transition-speed

of 4

Which timing function has constant speed?

ease

ease-in

linear

cubic-bezier

of 4

Which property should you animate for better performance?

width

margin

transform

font-size

of 4

What is the shorthand order?

duration property delay timing

property duration timing delay

property timing duration delay

delay property duration timing

Frequently Asked Questions

What is the difference between transition and animation?

Transitions are triggered by state changes (like hover), while animations can run automatically and support multi-step keyframes.

Can I transition from display: none?

No, display property cannot be transitioned. Use opacity and visibility instead for fade effects.

What's the best timing function for hover effects?

ease or ease-out are generally best for hover effects as they feel natural and responsive.

How do I transition multiple properties?

Use comma-separated transitions: transition: opacity 0.2s, transform 0.3s ease;

CSS Transitions

What are CSS Transitions?

Basic Syntax

Transition Properties

Timing Functions

Shorthand Syntax

Common Transition Examples

Which Properties Can Be Animated?

Transition vs Animation

Practical Card Example

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

CSS Transitions

CSS Transitions

What are CSS Transitions?

Basic Syntax

Transition Properties

Timing Functions

Shorthand Syntax

Common Transition Examples

Which Properties Can Be Animated?

Transition vs Animation

Practical Card Example

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?