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.
<div class="container">
<div class="row ct-choice-box__row">
<div class="col-md-4 col-sm-6">
<a class="ct-choice-box business" href="#"><span class="inner"><img alt="Explore" src="https://www.solodev.com/assets/transition-animiations/transition-animations-1.jpg"> <span class="ct-choice-box__header">Explore</span></span></a>
</div>
<div class="col-md-4 col-sm-6">
<a class="ct-choice-box residents" href="#"><span class="inner"><img alt="Journey" src="https://www.solodev.com/assets/transition-animiations/transition-animations-2.jpg"> <span class="ct-choice-box__header">Journey</span></span></a>
</div>
<div class="col-md-4 col-sm-6">
<a class="ct-choice-box living" href="#"><span class="inner"><img alt="Travel" src="https://www.solodev.com/assets/transition-animiations/transition-animations-3.jpg"> <span class="ct-choice-box__header">Travel</span></span></a>
</div>
</div>
</div>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.
a {
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
}
html:not(.mobile):not(.tablet) .ct-choice-box:hover {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
z-index: 10;
}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
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">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.
Originally Posted on the Solodev Web Design Blog
Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.
