Thursday, March 28, 2024

CSS3 Transitions: Syntax and Example Code

Introduction

In the last 10 years, I have seen websites evolve from ugly looking text-based websites to fancy (but extremely heavy) Flash-based websites to CSS3-enabled lightweight yet attractive websites. In the last few years a new genre of websites have sprung up called Web apps. In the coming 12 months, we will see the line between Web apps and websites fading away. The element that has changed over the years is the interactivity and involvement of the visitor on the website.

In the early days, it was more like a monologue. The visitor would visit your website and read the content you had uploaded to it. When people realized that it was getting too boring, they introduced Flash to make the websites more attractive. In spite of its attractiveness, Flash brought its own set of problems to the web and eventually people realized that the web needed a more open standard and something that is more lightweight. With the introduction of HTML5 and CSS3, we now have actual choices besides Flash for building interactive and animated websites–and Web apps.

Interactive websites involve quite a few elements. AJAX, a snappy response when you click things and the most important, multi-device compatibility. With Google Android and Apple iOS dominating the non-desktop device market, and the huge success of the iPhone and iPad, developers are desperately looking for options other than Flash, which isn’t supported on iOS and many Android devices.

CSS Transitions

One of the important aspects of interactivity is animation. Until now, we had to use a combination of HTML, CSS and JavaScript to animate objects on the web. In 2007, Apple introduced the CSS transition, which later became a proprietary feature of Safari called CSS Animation. The W3C consortium decided to go with CSS transformations which is supported on most modern-day browsers, both on the desktop and mobile device.

The CSS3 Transition Syntax

CSS transitions are nothing other than mutating of DOM elements by the use of CSS. The element’s CSS properties will change over a period of time from one to the other. What properties can be transitioned? Well, almost all properties. There are a few exceptions to the rule depending on what browser you are testing on, but in theory, all properties (except of course transition itself) can be transitioned.

Here is the short hand syntax to transition a property:

-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;

Unfortunately all browsers interpret it differently, which is why we have to define it 4 times. The parameters however, are identical for all the browsers. If you like, you can define it explicitly, like this:

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

You will have to define it explicitly for each of the browsers, which would require 16 lines of CSS as opposed to 4 lines as shown above.

The first two parameters need an explanation. The last one is used if you want to begin the transition after a certain duration. The third parameter, timing function, is what makes CSS transitions really elegant. You can specify how the transition should occur.

  • cubic-bezier(cp1x, cp1y, cp2x, cp2y)
  • ease − equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).
  • linear − equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0).
  • ease-in − equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).
  • ease-out − equivalent to cubic-bezier(0, 0, 0.58, 1.0).
  • ease-in-out − equivalent to cubic-bezier(0.42, 0, 0.58, 1.0).

CSS3 Transition Examples

There is no better way to understand something than by seeing a few examples. And that is exactly what we are going to do. We will look at a couple of examples of single property transitions followed by an example of two properties. Once you understand how you can transition 2 properties simultaneously, you can do the same for as many properties as you like.

Cross-fade Between Images

Cross-fade is one of the most aesthetically pleasing transitions between photos. The concept is quite simple. Position one photo on top of the other and gradually reduce the opacity from 100% to 0 of the top image. Before CSS transitions, it was a pain to achieve this. We had to write a JavaScript function with a setTimeout that decrements the opacity of the image. And with CSS3’s transition property, with just a few lines of code, we can cross-fade between two images with ease. Here is the code for it:

	
<div id="cf">
    <img class="bottom" src="images/pebbles.jpg" />
    <img class="top" src="images/summit.jpg" />
</div>

#cf {
    position:relative;
    height:281px;
    width:450px;
}
#cf img {
    position:absolute;
    left:0;
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;    
    transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
    opacity:0;
}

If you are on a modern browser that supports CSS3 transitions, click here to see the cross-fade in action.

Rotating Box

The example code below displays a div and clicking on it rotates it by 360 degrees over a period of 3 seconds:

<div style="width: 400px; -webkit-transition: -webkit-transform 3s ease-in;" onclick="this.style.webkitTransform='rotate(360deg)'">
    This div will do a spin when clicked the first time!
</div>

Click here to see the spinning div in action. You should notice that in the style property, we have specified the transition property is transform. However, we have not specified the transformation in the style code. We are defining the transition property when the user clicks using JavaScript.

Multiple CSS3 Transitions

Usually we use single transitions only, however sometimes adding multiple transitions together enhances the experience. The syntax for multiple transitions is quite simple

transition: property_name1 duration1 timing_function1 delay1, property_name2 duration2 timing_function2 delay2, …

Straight forward, isn’t it? Let’s look at an example:

#resizable div {
    padding: 5px 10px;
    border: 1px #999 solid;
    height: 40px;
    width: 300px;
    background-color: red;
    -webkit-transition: height 0.3s ease-in-out, background-color 0.3s;
    -o-transition: height 0.3s ease-in-out, background-color 0.3s;
    -moz-transition: height 0.3s ease-in-out, background-color 0.3s;
    transition: height 0.3s ease-in-out, background-color 0.3s;
}

#resizable div:hover {
    background-color: blue;
    height: 100px;
    -webkit-transition: height 0.6s ease-in-out, background-color 0.6s;
    -o-transition: height 0.6s ease-in-out, background-color 0.6s;
    -moz-transition: height 0.6s ease-in-out, background-color 0.6s;
    transition: height 0.6s ease-in-out, background-color 0.6s;
}

Click here to see the resizable boxes in action.

I hope you’ve learned something about CSS3 transitions and how to use them. Till next time!

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured