Home arrow Style Sheets arrow Intro to CSS Transitions
STYLE SHEETS

Intro to CSS Transitions


In this first part of a two-part tutorial, you will learn how to use the “transition” CSS3 property. You'll see that it's easy to transition different properties of an HTML element -- even multiple properties at the same time.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
October 04, 2011
TABLE OF CONTENTS:
  1. · Intro to CSS Transitions
  2. · Transitioning an HTML element's

print this article
SEARCH DEVARTICLES

Intro to CSS Transitions
(Page 1 of 2 )

Without a doubt, the new properties included with CSS3 have made many web designers happy. After all, now it’s possible (among other things) to render stylish shadows around text and boxes without having to use heavy background images. You can even create nifty rounded corners without cluttering the web page’s markup with nested elements or tricky JavaScript snippets.

Although these features have generated the most hype in the last few months, the specification includes others which expand on the already vast terrain of “behavioral CSS.” Do you want an example of this? Then enter the world of the “transition” property, a powerful, full-featured module which permits users to create animated transitions between two states of a given HTML element.

Definitely, there’s no shortage of options for leveraging the functionality that “transition” brings to the table. It will let you transition different properties of a web page element (yes, even at the same time) when hovering on it, focusing on it, and so forth. And best of all, the effects will be correctly rendered by most modern browsers, although Internet Explorer remains the bad boy of the block. 

Since CSS transitions are here to stay, in this two-part tutorial I’ll be creating some approachable examples that will show you how to work with them in a few different use cases. This way, you can soon start utilizing them to give a fresh and appealing touch to your own web pages.  

Getting started: creating an introductory example

As I just explained, CSS3 transitions can be used with different properties of an HTML element. However, the best way to understand the logic behind them is by means of a basic example. In keeping with this idea, below I created one, which transitions the color of the text wrapped by a generic container when hovering on it.

Here’s how this introductory example looks:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using CSS3 transition (transitioning the 'color' property)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background-color: #fff;
    font: normal 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
h2 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #585858; 
}
p {
    margin: 0 0 15px 0;
    line-height: 1.3em;
}
/* main wrapper */
#wrapper {
    width: 780px;
    margin: 0 auto;
    background-color: #fff;
}
/* header, main and footer elements */
#header, #main, #footer {
    padding: 20px;
}
/* transitioned element */
.section {
    width: 400px;
    padding: 20px;
    background-color: #e27523;
    color: #000;
    border-radius: 8px;
    transition-property: color;
    transition-duration: 1s;
    transition-timing-function: ease;
    -moz-transition-property: color;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease;
    -webkit-transition-property: color;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease;
    -o-transition-property: color;
    -o-transition-duration: 1s;
    -o-transition-timing-function: ease;
}
.section:hover {
    color: #fff;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="main">
        <div class="section">
           <h2>Color transition</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        </div>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

From the above code fragment, it’s clear to see how the “transition” property does its thing. All that you need to do to get it working is specify the name of the property to be transitioned (in this case “color”), then the duration of the effect, and finally the algorithm that will be used to perform the transition. Possible values for this last option are “ease,” “ease-in,” “ease-out,” “ease-in-out” and “linear.”

Lastly, you should notice that the “hover” state of the transitioned div defines a white color for its wrapped text. Well, if at this moment you test the previous web page using a “transition-compliant” browser, like FireFox and Chrome, you should see that the color of the text of the target element will change smoothly from a dark gray to the previously mentioned white. That’s pretty impressive, considering that the effect was implemented without having to code a single line of JavaScript!

So far, so good. Now that you've grasped how to transition the text color of an HTML element, it’s time to continue exploring the functionality offered by the “transition” property. In the next segment I’ll be setting up another example. This time, it will use the pertinent property to transition the background color of the same target div.

To see how this will be done, click on the link below and read the next few lines.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials