Search⌘ K
Home
Courses
Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4

Introduction to Transitions

Explore the fundamentals of CSS transitions, including how to use the :hover pseudo-class to create smooth changes in element styles. Learn to apply transitions to multiple properties and understand which CSS properties can be animated to improve user experience in interactive layouts.

We'll cover the following...

Let’s understand how animations and transitions work in CSS.

An introduction to transitions in CSS

Let’s add a button to an HTML page:

<button>
 Test-crashbutton
</button

Additionally, let’s add CSS to style our button:

NAME_
CSS
button{
  padding: 10px 20px; 
  background: tomato; 
  border: none; 
  border-radius: 5px; 
  font-size: 20px; 
  color: white;
}

How do we give the user a visual sign that they are hovering over that button?

A very common solution is to add the little hand with a finger icon (i.e., the pointer) to the list of CSS declarations for our button:

NAME_
CSS
button{
  /* code skipped for brevity ... */ 
  cursor: pointer;
}

The cursor: pointer statement means that we want the cursor to turn into a pointing finger icon when it hovers over the button.

Effectively, we’re specifying some special behavior for our button.

This special behavior only happens when ...