Understanding CSS Transitions

Hola!

Haven’t you felt anytime that though you used perfect colour combination, structure and elements in you site, yet something is missing. Yeah! I too have felt the same many times. Sometimes to give better user experience you need to add more than these. You need to give them the feel that they are actually interacting with the site. For example, user while clicking on button should get the feel that button did click, such as ripple effect, press effect, etc. Similarly display of banners, menu, pop ups, etc. should be provided with some transition effects when they appear or disappear or selected.

We have plenty of options to achieve these simplistic animations like jQuery, javascript, css, etc. But if we can achieve these animation through css, it’s the best choice. Why? Let me elaborate on that.

Firstly, CSS transitions are handled natively by browser, hence always faster than any comparable javascript animation.

Writing equations and several lines of codes in javascript is tedious. Rather why not use the properties to achieve what you want!

3D animations or rotational animations are possible in css transitions.

So let’s understand the basics of CSS transitions. Here we go.

What is Transition?

It’s an effect that is triggered between two states- initial state and final state. Suppose, initial state is top:-600px i.e., the div is hidden and final state is top:20px. In this case on hover we don’t want it to abruptly appear on screen. What’s the fun in that! What if we want to glide it in with transition like ease in? Let’s see how CSS3 will help us in these kind of problem.

Suppose we have a div with image and text on it as overlay. I want to display this text only on hover and that too it should glide in on hover rather than just appearing.

Suppose .thumbDiv is the class of image div.

So my text span has class .text and initial style as follows:

span.text { 
position: absolute;
z-index: 2;
height: 70px;
background: rgba(25, 24, 24, 0.67);
padding: 0;
width: 100%;
overflow: hidden;
color: white;
bottom:-400px;
-moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -o-transition: all 03s ease-in; }

But on hover on .thumbDiv I will make it appear as:

.thumbDiv:hover>.text { 
bottom:0px; }

As you can see the only property I am changing is bottom, because I want the overlay to appear from the bottom gliding up.

You can see this simple work around example in action here:

https://msmsmonika.github.io/CSS3Transition/

and can download code from my github.

There is more to transitions.

Cross Browser Compatibility:

For cross browser compatibility you need to add appropriate prefixes like you might have encountered for other properties.

-webkit-transition: property_name duration timing_function delay;
-moz-transition: property_name duration timing_function delay;
-o-transition: property_name duration timing_function delay;
-transition: property_name duration timing_function delay;

More in Transitions:

Above is shorthand way of writing all the specs at once. But due to browser compatibility issues, it is recommended that you write like following:

transition-property: property_name; 
transition-duration: duration;
transition-timing-function: timing_function;
transition-delay: delay;

Now let’s see what these means.

property_name is the css property you are targeting. It can be specific like top, opacity or if you want o sum various factors together go for all.

duration defines the total time span in which that transition should finish.

timing_function defines the way the things will move like ease in or ease out, etc.

delay defines whether you want any delay before that transition will happen

So that’s it. Isn’t it simple! To make it more dramatic you can use properties like transform, translate, rotate, or even combinations!

So keep creating beautiful animations…. 🙂