CSS Transitions | Digital Phoenix Agency
12 Oct 2016
12 Oct, 2016

The UI we tend to use today is no longer very static. They tend to be very lively and very fluid, take for example our favorite Websites or Applications. You'll notice as you're playing with them, things are just jump from point A to point B suddenly, and that's because they're animated. And one of the things that makes all this possible is a technique known as Transitions.
 

CSS3 Transitions bring simple and elegant animations to web applications. A CSS3 Transition allows us to change the property values of an element over a given duration that we set. To create a transition we must first identify which CSS property we want to add an effect to and then specify the duration of the effect. If no duration is set, the transition will not occur.

There are four transition properties:

  • transition-property (required)
  • transition-duration (required)
  • transition-delay (optional)
  • transition-timing-function (optional)

Note that each transition property can be defined individually, but for cleaner and faster code, it's recommended to use the transition shorthand. 
For example:
 

 div {
    transition: [property] [duration] [timing-function] [delay];
  } 

I'll explain each one of these properties in order. transition-property - is used to define what property, or properties, we want to apply a transition effect to. We can apply a transition to an individual property like background-color or to all properties in the rule-set by set it to all.

  div {
    transition-property: background-color;
    transition-property: all;
  } 

transition-duration - is used to define the duration of a specified transition. That is, the length of time it will take for the targeted element to transition between two defined states. This can be specified in seconds (s) or milliseconds (ms). The default value for this is 0s.

For example:

 div {
    transition-duration: 2s;
 } 

transition-delay - is used to define a length of time to delay the start of a transition. This can also be specified in seconds(s) and milliseconds (ms) like transition-duration. By default, the transition starts as soon as it is triggered, like on mouse hover. Note that this property is optional.

Shorthand example:

  div {
    // 1s specifies the delay
    transition: all 2s 1s; 
  } 

transition-timing-function - is used to define a function that describes how a transition will proceed over its duration, allowing a transition to change speed during its course. The default timing is ease, which starts out slow, quickly speeds up, and then slows down at the end. The other timing options are: linear, ease-in, ease-out, and ease-in-out.

  div {
    transition-timing-function: ease-in-out;
  }

  // Shorthand
  div {
    transition: all 2s ease-in-out;
  } 

Great, let's see some examples:

html, body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: tomato;
  transition: background-color .6s ease-in-out;
}

.box:hover {
  background-color: skyblue;
} 

Notice that by specifying the transition on the element itself, you define the transition to occur in both directions. So when we hover on the properties will transition and when we hover of they will do the same. Let's take another example by setting the all keyword on property name:

html, body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: tomato;
  transition: all .6s ease-in-out .6s;
}

.box:hover {
  background-color: skyblue;
  border-radius: 50%;
} 

See how all triggered all the properties and changes the border-radius too? Awesome! Also notice that we've set a transition-delay too, for the action to trigger after 0.6ms (milliseconds).
 

Feel free to play with this examples and create some great effects to use on your personal project.

By now, I hope you have a deeper understanding of CSS transitions, and how a this simple feature can be combined to produce complex and rich effects. Next time I'll cover a more powerful feature and property which CSS3 has to offer -CSS Transforms.

A great resource I find very useful - CSS Transitions

Ready to get Started?