How To Make Your Page Look Alive with CSS Transitions

Going Through HTML & CSS courses, I learned A LOT, but surprisingly, I never come across the Transition property up until recently, and I've been loving it ever since.

What Is CSS Transition?

in short, CSS Transition is a CSS Property meant to provide a way to control animations' timing and smoothness! but, why not show you an example because what's a better way to explain than showing an example?

Let's make an HTML file together!

we gonna make a div that has a red background color and a light blue border (I'm not the best at picking colors).
we'll give it 100px for both width and height, and 3px to the border.

I also added box-sizing: border-box; to make the box always stays the same width and height (100px) however we increase the border, learn more about it here!

our result will look like this:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  background: red;
  border: 3px solid lightblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

now, let's make the colors of the background and the border switch when we hover on the div (using div:hover selector), we'll also make the border bigger (25px) :

div:hover {
  background: lightblue;
  border: 25px solid red;
}

now if we open the HTML file and hover on the div, the changes will happen, but instance and with no animations or anything, but with one single line of code we can make everything way better. We simply add transition: 450ms; (450ms means 450 milliseconds) to the div selector.

our final result will look like this:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  background: red;
  border: 3px solid lightblue;
  transition: 450ms;
}

div:hover {
  background: lightblue;
  border: 25px solid red;
}
</style>
</head>
<body>
<div></div>

</body>
</html>

if we now refresh the page and hover again, you'll see how everything changes smoothly.

how cool is that? with just one single line, you can make everything changes smoothly on the page, no

@keyframes

rules or anything!

CSS Transition Properties

but wait, that's not everything CSS Transition can offer

here are all the properties that are related to it :

transition-delay

How much time before the 'transition' or 'animation' starts.

transition-duration

How long the Animation plays.

transition-property

which property to have a transition effect.

transition-timing-function

The speed curve of the transition effect.

transition-duration

and

transition-delay

explain themselves, but what about the

transition-property

and

transition-timing-function

transition-property

: let's say we have a div (same as the one above) but instead of changing the color only, you gonna also rotate the div 45 degrees, but you want it to instantly rotate it and the rest to animate in 450ms

we simply add

transition-property: background, border;

to make the background and the border animate, and add

animation-duration: 450ms;

to add the duration (duh)

and of course, we go to the div:hover and add

transform: rotate(45deg);

so the box rotates

the result will look like this :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  background: red;
  border: 3px solid lightblue;
  transition-property: background, border;
  transition-duration: 450ms;
}

div:hover {
  background: lightblue;
  border: 25px solid red;
  transform: rotate(45deg);
}
</style>
</head>
<body>
<div></div>

</body>
</html>

and there you go, now the border will just instantly rotate 45 degrees

transition-timing-function

when you normally add a transition effect to anything, it will move at the same speed the whole time, think of it like a car going from A to B in a speed of 50 kilometers per hour, but in this case, instead of speeding up until it reaches 50k/h, it instantly starts at that speed, and when it reaches point B, it instantly stops, that's how transition works by default.

but with this property, we can control that, for example

I made this pen on CodePen : https://codepen.io/SpaYco/pen/zYGNNaX

as you can see, we have 2 cars, and if you hover on any of them, both will move, the first one will move at the same speed, while the second will take time to start speeding up and slowly decrease the speed as it's reaching the end, but they will both reach the same destination at the same time!

that's because we added

transition-timing-function: ease-in-out;

to the second car!

see the full list of the values of this property on w3schools.

Changing Multiple Properties

this is all cool, but what if we wanted to make the border change in 450ms, and the background color to change in 750ms while it has ease-in timing function?

simple!

we simply use

transition

for multiple changes.

so if we want to do what I said above we simply do the following

transition: border 450ms, background ease-in 750ms;

(it is recommended to use each property in its line for better readability, as shown in the result below)

so here's the result of making those changes (I removed the rotation because it's irrelevant now)

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  background: red;
  border: 3px solid lightblue;
  transition: border 450ms,
  	      background ease-in 750ms;
}

div:hover {
  background: lightblue;
  border: 25px solid red;
}
</style>
</head>
<body>
<div></div>

</body>
</html>

if you add these changes to the HTML we made earlier, and refresh the page, you'll see that each property has its own time and timing function!

Summary

The CSS Transition is a cool property to use on your website, not only it will make it look better with the animations and effects, but also make it more alive and attractive to users! I recommend start messing with it and see its capabilities!