Simple CSS Transitions in 2020

CSS Transitions can breathe life into our web applications, from smooth slide-down effects to fading elements out, without these our applications can seem very static and dull.

Yet, even with the importance and support of CSS transitions , they are still woefully misunderstood and many developers (I know I was) are guilty of copying and pasting code they don't understand. This can lead to unmanageable code and transitions that aren't behaving correctly.

This article will rectify this by giving you a concise guide on how to use CSS Transitions to improve your web applications.

CSS Transitions

The code to create a CSS transition is incredibly simple:
transition:

height .25s ease-in

This way of writing transitions is short hand, you can also write:

transition-property: height,
transition-duration: 0.25,
transition-timing-function: ease-in

I find this way of writing transitions adds a lot of bloat and essentially complicates things.

What this code is saying is, when the height changes I want to transition it at a speed of 250ms and ease-in basically says I want it to start slow.

I find it much easier to write transitions by just looking at the following, which clearly states the order of the transition properties:

transition: <property> <duration> <timing-function> <delay>

The part of this which is normally most misunderstood is 'ease-in', this isn't surprising as the property name for 'ease-in' is 'transition-timing-function' , which let's be honest doesn't make it any less easier to understand.

However it can explained quite simply:
Easing describes an animation's rate of change over time

It really is that simple!

should my transition start fast?
start slow?
start slow and endfast?

The following is the values you can pass to your transition-timing-function:

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

As a side note, you can also use cubic-bezier(n,n,n,n) which we will use in our example.

I think that is enough theory, believe it or not even with this core knowledge you are well on your way to understanding transitions.

The best way to learn CSS Transitions is by looking at an example.
I have created a very simple CodePen showing everything we discussed here in action.

As you can see from the CodePen, it is quite basic and shows a bat pushing a ball. (this may not look quite right but if you click 'edit on codepen', you can see it in all its glory)

So lets go through the different parts to achieve this:

1. The Bat

So sometimes its best to think of the start and end position rather than the transition. So basically what we want is to move the bat a certain amount so that it reaches the ball, the code to achieve this:

.baseballbat.move{
  transform: translateX(200px) rotate(50deg);
}

This code is very simple, translateX(200px) will move the bat 200px to the right when the class move is applied (classes can be added with JavaScript).

Ignore rotate, I just used it to flatten out the bat as it was pointed to the corner from the image I got.

So the next step is to transition the baseballbat.

The following code will accomplish this.

.baseballbat{
  height: 250px;
  width: 200px;
  transform: rotate(50deg);
  margin-left: 30px;
  transition: transform 350ms ease-in;
}

The main part to focus on here is:

transition: transform 350ms ease-in;

This is very basic, we apply a transition to the transform property, it will take 350ms and it will have a transition-timing-function of ease-in.

Now the baseballbat moves much more fluidly.

2. The Ball

So now it's time to move the ball when the baseballbat reaches it.
So like before, we first focus on the end position of the ball, very similar to the baseballbat we add a transform property:

.ball.move{
  transform: translateX(300px);  
}

When the move class is applied to the ball, it will move 300px to the right.

So far, so good?

Ok, so like before (see how similar everything is), we now add a transition to the transform property of the ball.
The code looks like this:

.ball{
  height: 100px;
  margin-left: 250px;
  top: -50px;
  transition: transform 550ms cubic-bezier(.02,.63,.79,1.33) 350ms;
}

Ok so everything looks the same, we apply a transition on the transform property, the transition will take 550ms and the last value is the delay, note that the delay matches the transition length of the baseballbat to ensure the ball will only move when the bat stops.

So we have a new value here:

cubic-bezier(.02,.63,.79,1.33)

Cubic-Bezier allows us to achieve much more real transitions, you can see using this cubic-bezier, the ball moves forward then goes back, almost like there is a backspin on it.

Cubic-Bezier can look quite complicated but it doesn't need to be, using cubic-bezier.com, you can easily create these cool transitions. With a little playing around on the website, you will be fully comfortable with it and easily able to copy and paste it into your transitions.

Summary

Believe it or not, that is basically everything you need to know to use transitions. It is incredible how simple transitions are, but yet how many developers still don't understand them. I hope with this guide I have converted more developers to learn their tools rather than copying and pasting.

Any questions/problems, just leave a comment below.

Thanks for reading.