CSS3 Transitions Basics

Over the last few years we have seen the use of CSS3 transitions specification become very popular in modern web design. With new properties like, border-radius, text-shadow, box-shadow, opacity, RGBA and the use of multiple background images, we are now able to enhance the usability of our websites and improve the visual aspects as well.

Putting those previous properties aside, let me direct your attention over to the beloved transition features CSS3 has to offer. This ability to create interaction within the browser without writing any Javascript code is a huge improvement in the front-end world and isn’t really that difficult to grasp.

Transitions allow you to change the state of an element and make it appear differently when hovered over, activated or focused on. You have probably noticed this but didn’t know that this has anything to do with CSS transitions for example, have you ever clicked on a button or hovered over it with your cursor and it moved, changed colour or changed in its appearance in anyway? Well, that’s the work of transitions. Let’s code up a quick example:

If you hover over the button above you will notice two things, firstly the buttons appearance changes from a rectangle to having rounded corners and secondly, the colour changes from the initial bright crimson to a lighter pinkish colour. The CSS looks like this:

As you can see from the above code example, the transition property transition-duration was used with the duration of 1 second, so when the button is being hovered over, the duration of the element to reach its hovered state will take 1 second. Also, the :hover pseudo class selector was used, this is where the styles for the hover state are defined, likewise the :active pseudo class changes the button to white while in its active state.

Another property in the transitions feature is the transition-delay property. This basically just adds a delay to the selected element, so if you set a value of 1 second on your button, it will not transition to its final state until the delay time has passed.

Left, Right, Left

Hover inside the container to see what happens.

If you hover inside the white container, you will notice a few things. The most obvious is that the blue square completely transforms, its shape, color, size and position all change. Lets see how this was done:

Looking at the code above, we have three sections to this transition. Firstly, are the styles for the outer white container which is wrapped around the square. Secondly, are the styles for the square when its in it’s initial state and lastly are the styles for the square/circle when it’s in its transformed state. Notice how a descendant selector was used on the .container using the :hover pseudo class followed by the .square selector, this is because we wanted to target the square that is inside the container.

Take Off! – Using The transition-timing-function Properties

Although transition properties can be used to modify elements throughout our web pages, there is another property associated with transitions that can enhance this feature even more. This is called the transition-timing-function property. This property affects an elements duration as the transition is taking place, and comes in a number of predefined values that can be included in our CSS.

The available values that can be set to this property are:

  • ease (this is also the default value)
  • ease-in
  • ease-out
  • linear
  • ease-in-out
  • step-start
  • step end

As we’re going to use this wonderful rocket icon provided by Icon Monstr, let’s use the ease-in value to resemble the take off motion of a rocket, so we want the transition to start off slow and build up speed before reaching its destination. Again, hover inside the container to see the result.

The rocket icon was simply added to the page via an img tag in the HTML file using the png format, given the and set to a specific width and height of 100px. Selected in the CSS, the transition-duration property with the value of 1.5 seconds was defined as well as our new property, the transition-timing-function with our chosen predefined value ease-in. For the rocket to reach the other side of the container, a margin-left property is needed otherwise it will just remain in the same spot and start scaling down in size due to the width and height values defined on the :hover pseudo class.

Browser Support

Fortunately transitions are supported by Chrome and Safari, Firefox 4 and above also supports transitions as well as Opera 10.5 and above. However, to ensure complete support across all browsers, ensure you’ve included the vendor prefixes.

  • -webkit-transition:
  • -moz-transition:
  • -o-transition:

IE 10 and above also supports transitions and doesn’t require a vendor prefix.

Further Resources

Leave a Reply

%d bloggers like this: