Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4/

...

/

Introduction to Transitions

Introduction to Transitions

Learn about transitions in CSS.

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:

Press + to interact
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:

Press + to interact
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 ...