Using CSS Transitions and Transforms
CSS transitions and transforms are behind some of the most intriguing design elements in contemporary web design.
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 pagetransitions-transforms.css
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.