Using CSS Transitions and Transforms

CSS transitions and transforms have been a staple in the web designer’s toolbox for some time. Both CSS elements give you the ability to create unique, innovative animations and movements all with a couple of changes in your stylesheet. Further, all of this is accomplished without the use of third-party plugins or complicated JavaScript.

The “transition” and associated “transform” properties are often behind some of the most intriguing design elements in contemporary web design. In combination, these properties allow you to create a wide variety of effects.  The transition property controls what other properties will be animated, the length of the animation, and what’s known as “easing functions”. Essentially, the transition property dictates an animation’s speed and smoothness.

The “transform” property, on the other hand, controls the look of a specific animation. Using functions such as “scale()”, “translate()”, and “rotate()”, you can create interactive elements that add a certain contemporary style to your website.

It should be noted that its highly recommended to include vendor prefixes with the two properties. While the standard “transition” and “transform” properties are increasingly adopted, it is still encouraged to include the “-webkit” and “-ms” prefixes to ensure compatibility with as many browsers as possible.

To get you started in the world of CSS transitions and transforms, a code sample showing an elegant link hover effect is shown below. 

Step 1 - transitions-tranforms.html

Copy and paste the HTML below into your web page. Because everything is controlled by the CSS, the HTML is fairly straightforward.

Step 2 - transitions-transforms.css

Download the CSS below and include it in your web page

Within the stylesheet, the two most important classes are "a" and ".ct-choice-box:hover", both of which are listed below.

The "transition" property on the "a" class creates a timing effect that is applied to all properties of the link, at a rate of 250 milliseconds, and with the standard easing function.

The "transform" property of the ".ct-choice-box:hover" class creates a scaling effect where the link (in this case an image link) increases in size by 1.15.

Step 3 - Add the includes below to your web page

By following the above steps, you should now have a hover transition effect that's intriguing but not distracting from your UX.

This tutorial, however, only covers the basics of transitions and transforms. View all of the transition effects and transform effects so that you can create truly unique animations.