Transitions

Many modern websites include very cool animations. The more complex ones are often created with scripts or advanced properties, but the simpler animations can be done using only transitions. These include effects like increasing the size of an image or slightly darkening a button's color when you move the mouse over it. In this topic, you will learn how to add these kinds of animations to your websites using the transition property.

Syntax

When we use the transition property we can define which CSS property we want to apply, the time of this transition, how it will occur and we can also define a delay

There are four transition values that we can use:

• transition-delay: Specifies the delay of the transition effect.

• transition-duration: Specifies the duration of the transition effect.

• transition-property: Specifies which CSS property the transition effect is applied to.

• transition-timing-function: Specifies the speed curve of the transition effect.

You can use each one of the properties separately, or you can use them all in one single property.
So which one should we use? It is recommended that when using more than one property, we group them all together in one.
Let's look at one example:

/* This code */
.element {
  transition-duration: 1.5s;
  transition-timing-function: ease-in;
}

/* It's better to write it this way */
.element {
  transition: 1.5s ease-in;
}

Some different combinations of these values are shown below:

.element {
  /* property duration timing-function delay */
  transition: border 1.2s ease .35s;

  /* property timing-function duration delay */
  transition: all ease-in-out .5s .5s;

  /* property duration timing-function */  
  transition: margin .5s linear;

  /* duration timing-function delay */
  transition: 2.3s ease-in 1s;

  /* duration delay timing-function */
  transition: .75s .3s ease-out;

  /* duration delay */
  transition: 1.2s 1.2s;
}

The rule here is the following:

• The first text represents the CSS property

• The first number represents the duration

• The second number represents the delay

• The second text represents the timing-function

• If the CSS property is defined it always has to come first

• The timing-function can be placed before, after or in between the duration and delay

As an example, let's create an img tag and set its opacity to increase when we hover over it:

img {
  opacity: 0.7;
  transition: opacity .5s ease;
}

img:hover {
  opacity: 1;
}

By default our image was set to 70% opacity, when hovering the mouse over it our transition will happen by creating an animation and increasing the opacity to 100%.

Property and duration

The property and duration values allow us to define which property we want to change and how long the effect should last. It's possible to animate many different properties: you can find the complete list on the MDN website.

We'll create a login button to demonstrate how these two values can be combined to create different animations:

<div class="container">
  <button class="login">Login</button>
</div>

.login {
  border: none;
  border-radius: 5%;
  background-color: rgb(39, 223, 192);
  color: aliceblue;
  width: 30%;
  height: 30px;
}

For now, it's just a simple button there's nothing special about it so let's make it more interesting using the transition property.

Say we want to change the background color when the mouse hovers over it. We must first specify that the background-color is the property we want to change, and then that the :hover event will trigger the transition:

.login {
  transition: background-color;
}

.login:hover {
  background-color: rgb(42, 168, 147);
}

As you can see, the effect isn't working as expected yet. The change is happening instantly because we haven't set the duration, and the default value is zero seconds. Providing a duration value fixes this:

.login {
  transition: background-color 1.5s;
}

Specifying property values is useful when you want different effects for each property, but if you would like every property to have the same transition effect, you can simply use all instead of specifying the CSS property. Omitting the CSS property value will also give the same result.

/* This code */
.login {
  transition: background-color 1.5s;
}

/* can be written like this */
.login {
  transition: all 1500ms;
}

/* or like this */
.login {
  transition: 1.5s;
}

Timing-function

Thetiming-function value specifies the speed curve over which the transition will occur. There are some predefined values that we can use. You can find full details about how each one works on the MDN website, and the most common are listed below:

• ease: The transition starts slow, increases in speed towards the middle, and decreases towards the end. It's the default value.

• linear: The transition occurs at the same speed throughout.

• ease-in: The transition begins slowly.

• ease-out: The transition ends slowly.

• ease-in-out: The transition starts and finishes slowly. Unlike ease, it does not increase the speed towards the middle.

Let's start with ease. This time, in addition to changing the background-color, we also want our element to increase in size.
To achieve this, we'll add the transform property as well. To work with two or more properties, we have to separate each one with a comma:

.login {
  transition: background-color 1.5s,
              transform 2s ease;
}

.login:hover {
  background-color: rgb(42, 168, 147);
  transform: scale(1.2);
}

Here is the result:

You may have noticed that there is a blur effect on the right side of our component. Without going into too much detail, this is because of the way the browser renders the pixels. To fix it, we need to remove the blur effect when the element is being transformed:

.login {
  -webkit-filter: blur(0px);
}

And now everything is working like a charm.

Now let's alter our timing-function and see how our component behaves with each predefined value.

This time we'll use all instead of separating our properties with a comma:

• linear

  .login {
    transition: all 2s linear;
  }
  
  .login:hover {
    background-color: rgb(42, 168, 147);
    transform: scale(1.2);
  }
  

  

  

• ease-in

  .login {
    transition: all 2s ease-in;
  }
  

  

  

• ease-out

  .login {
    transition: all 2s ease-out;
  }
  

  

  

• ease-in-out

  .login {
    transition: all 2s ease-in-out;
  }
  

  

  

Delay

The delay value specifies how much time (in seconds (s) or in milliseconds (ms)) should pass before our effect begins.

On this occasion, we will change our code to make our button turn blue and increase in size. We will also give our transition a 900ms(millisecond) delay.

.login {
  transition: 1.5s linear 900ms;
}

.login:hover {
  background-color: rgb(7, 123, 255);
  width: 25%;
}

So why didn't anything happen? It's because our effect is being delayed by 900ms, meaning our cursor must be hovered over the button for at least this long to see it start. If we remove the cursor too quickly it doesn't change! You can see what happens when the mouse hovers over the button for long enough below:

Conclusion

In this topic, you learned how to give your websites a modern twist by using the transition property and its values to make simple animations. You can use many different properties, set the duration, and control the animation's speed and delay. Combining all these features allows you to create very cool and unique effects.