Simple CSS Transitions in 2020
Tags: css, transitions, sass
Published: 2019-01-26 15:16:29

---
title: Simple CSS Transitions in 2020
published: true
description: Learn CSS Transitions
tags: css, transitions, sass
canonical_url: https://medium.com/@paulryan17/simple-css-transitions-in-2019-67a3b68126c
---

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.](https://codepen.io/PaulRyan17/pen/f4824ef6eec4782a8c555a5b0979b561)

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.