Web Development


CSS Transitions Complete Guide - Master CSS Transitions

Learn how to use CSS Transition Durations, Transitions with Transforms, and Custom Transition Timing Functions

4.60 (5 reviews)


34 mins


Jun 2021

Last Update
Regular Price


Blue Host
Fast, easy, and secure WordPress hosting in minutes + 1 free domain name
65%OFF : $2.95/month

What you will learn

What are CSS transitions

How transition delays work

How transition durations work

How simple timing functions work

How to do more advanced timing functions

How to use transition shorthands

How to target specific properties with transitions


Learn how to make your website stand-out and look smooth. Every web developer should utilize transitions in CSS to enhance their web page's style!

Transitions in CSS are used to make the transition of styles look smooth. For example, when you hover over a button and the button appears darker, instead of having it instantly become darker, we can make it gradually become darker, making the button feel more 'alive'.

In this course, we make sure to cover all of the things you need to know about CSS Transitions. This includes the following:

  • Transition Durations

  • Transition Delays

  • Transition Properties

  • Transition Timing Functions

  • Custom Transition Timing Functions (cubic-besier)

  • Transition shorthands

With this knowledge, you should be able to do the following:

  • Create a button with a hover transition

  • Transition a background color smoothly between two different colors

  • Rotate HTML elements smoothly

  • Smoothly fade out the opacity of elements

  • Use cubic-besier to create custom transition timings

What should I know before taking this course?

Before taking this course, you should have a basic understanding of how CSS works in terms of using selectors to select different elements on an HTML page, and applying styles to those elements.

Basic HTML knowledge is also highly recommended, but not necessarily required.


All of the the source code is provided as attachments to each module. We provide a link to a website that allows you to run the code right in your browser, so you can freely mess around with the original source code and view your changes live.


CSS Transitions Complete Guide - Master CSS Transitions
CSS Transitions Complete Guide - Master CSS Transitions
CSS Transitions Complete Guide - Master CSS Transitions
CSS Transitions Complete Guide - Master CSS Transitions





Transition Duration

Transition Duration Knowledge Check

Transition Property

Transition Property Knowledge Check

Transition Delay

Transition Delay Knowledge Check

Transition Timing Functions with Defaults

Transition Timing Functions with Cubic-beziers

Using Dev Tools for Cubic-beziers

Transition Timing Functions Knowledge Check

Transition Shorthand

Transition Shorthand Knowledge Check


Udemy ID


Course created date


Course Indexed date
Course Submitted by