Question:

Explain how CSS transitions work and use examples to demonstrate the different transition properties and their respective values.

How they work?

Transitions allow us to give effects to properties over a duration of time so we can get animation without using javascript. This can be used in dropdowns, image galleries to name a few. Let’s say we have a square and we want to turn that into a circle on hover, we can do that with a transiton.

Values of Transitons

Let’s discuss the values that the transiton properties can hold. These include in proper shorthand order and syntax :

transiton: transition-property || transiton-duration || transition-timing-function || transition-delay

From here I will explain each value and as I go show how I will use these properties to build functional transition.

transition-property

The opacity in this code is the transition-property value which can be a single value or it can be set to all or none which would disable the animation.

Code

   .square1 {
    border:none;
    width:100px;
    height: 100px;
    background-color: red;
    transition: opacity 1s;
   }

   .square1:hover {
    opacity:0;
   } 

Result

If you hover over the square it disappers but it doesn’t really have that animation effect that we desire so this is were we need to add other values to get it there such as transition-duration.

transition-duration

This value allows us to set a time for the transition from start to finish. In the previous example we didnt have this value set so the animation happens instantaneous. This time it is written as a number trailed with an s for example 1s would run the animation for one second. Now let’s update the code to add duration.

Code

 .square1 {
    border:none;
    width:100px;
    height: 100px;
    background-color: red;
    transition: opacity 1s;
   }

   .square1:hover {
    opacity:0;
   } 

Result

Cool now we got it fading out. Next let’s implement the transition-timing-function.

transition-timing-function

This property defines the ways an intermediate states of a transition are calculated. This is a bit complex value but the main thing is it makes your transition snappier. The vaules this property can take are :

ease || linear || ease-in || ease-out || ease-in-out || cubic-bezier(number,number,number,number)

Continuing are preivous code let’s add an ease-in-out timing-function. It’s a little hard to tell it’s working but if you compare you will see that it takes a bit longer.

Code

 .square1 {
    border:none;
    width:100px;
    height: 100px;
    background-color: red;
    transition: opacity 1s ease;
   }

   .square1:hover {
    opacity:0;
   } 

Result

Now let’s visit with the last property: the transition-delay.

transition-delay

Creates a delay between when a transition starts and when it actually does. So if we set a delay on our previous example when we hover over the square it will take a second before it starts like so.

Code

 .square4 {
    opacity:1; 
    border:none;
    width:100px;
    height: 100px;
    background-color: red;
    transition: opacity 1s ease-in 1s;
   }

   .square4:hover {
    opacity:0;
   } 

Result
stay hovered for it to transition

Summary

We explained the transition property and how it’s other properties can be used in shorthand to create an animation.