How to use the CSS transition property

#css #animation #webdev #learning

Photo by Sabri Tuzcu on Unsplash

How to use the CSS `transition` property

Or how I understand CSS transitions

I'm on a journey to learn CSS animations and I decided to start with the CSS transition property.

Before reading through this you should have a basic understanding of HTML and CSS.

This will cover the CSS transition property in as much depth as I feel I can go into. There will be other concepts thrown in here but I will gloss over them for now. This should be relatively basic and easy to understand, as I found this particular property pretty easy to understand.

There are 4 transition animation properties. They are:

transition-property
transition-duration
transition-timing-function
transition-delay

I'll break down each of these properties here.

transition-property: This is the property that you want to animate. This could be opacity, width, background or any number of different properties. The key thing to understand here is that you are defining what is going to be animated. Something to keep in mind is that not all properties are animatable (not sure if thats a word). A good rule of thumb is that if it has a middle state then you can probably animate it.

	Start State	transitioning	End State
`opacity`	0	0.5 👍	1
`display`	none	no middle state 😢	block

transition-duration: This is how long the animation will take place for. Or how long it will take to complete. Something to keep in mind when you are using this duration is that it's annoying to users if this takes to long. Alternatively it's jarring if it happens to fast or may be imperceptible that it even animated. Try and find a happy medium that feel right and has a purposeful duration.

transition-delay: This is how long it will delay before the animation starts. You may want to have multiple animations happening at the same time but maybe you want to delay your background transition for 0.25s before you start to transition the changing color.

transition-timing-function: This one is a little tricky to understand. Essentially it's the function that you give your animation to perform during this animation.

You have the choice between:

ease - the default value (arguably the most used). Gives a soft start and moves in to the transition.
ease-in - slow in the beginning, fast / abrupt at the end
ease-out - fast/abrupt in the beginning and slow at the end
ease-in-out - Honestly I can't really see a difference between the ease-in function but it basically a mixture of the two above.
linear - same consistent speed all the way through
cubic-bezier - This is a series xy coordinates passed to a function that will map the control points for a timing curve. This one is s little tricky and deserves a more in-depth description than I will provide here. Cubic Bezier

You can shorthand these properties by using the transition property and adding the properties as illustrated below.
transition: [property] [duration] [delay] [timing-function];

Here is an example of a transition on a button element.

We'll start with some HTML and CSS

<!--Start HTML-->
<body>
  <main class="container">
    <button class="btn">Submit</button>
  </main>
</body>

/* Start CSS */
body {
  background: lightblue;
}

.container {
  text-align: center;
}

.btn {
  margin: 20px auto;
  padding: 20px;
  width: 180px;
  border-radius: 20px;
  font-size: 1.4em;
}

Then we'll add color and a hover state

/* ... */

.btn {
  margin: 20px auto;
  padding: 20px;
  width: 180px;
  border-radius: 20px;
  font-size: 1.4em;
  background: papayawhip;
}

.btn:hover {
  background: azure;
}

Then we'll add a transition

/* ... */

.btn {
  margin: 20px auto;
  padding: 20px;
  width: 180px;
  border-radius: 20px;
  font-size: 1.4em;
  background: papayawhip;
  transition: background .5s ease; 
  /* Targets the background property and sets it to ease into the azure color in .5 seconds */
}

.btn:hover {
  background: azure;
}

We can also add a grow animation as well

/* ... */

.btn {
  /* ... */
  transition: background .5s ease .25s, width .25s ease-in-out;
}

.btn:hover {
  background: azure;
  width: 210px;
}

You can see the working example here:

This is a fairly contrived example but I feel like it illustrates a basic use case of this property without adding too much confusion.

Next Steps
I'll be moving onto CSS transformations next. I'm excited to see how I can use both these properties together to make something cool.

Side note

This blog post is part of a learning framework that I am trying to follow. There are several modules that you have to complete for every step of your learning process. Teaching is one of those modules and that is what this blog post is. This framework comes from John Sonmez' 10 steps to learn anything quickly. John's Course. I don't make any money if you buy this as I am not affiliated in any way. I do highly recommend it though.

Top comments (5)

Strahinja Babić • Apr 12 '18

Some friends of mine said man you have 2 fetishes when you do something
its the box-shadow and Transition :'D
Great article mate never had the chance to use the ** transition: background .5s ease .25s, width .25s ease;** type but will surely try it somewhere.