Home arrow Style Sheets arrow CSS3 Animations: Resizing HTML Elements
STYLE SHEETS

CSS3 Animations: Resizing HTML Elements


In this CSS3 animation tutorial, you will learn how to animate HTML elements utilizing the new "animation" property to perform actions such as resizing and rotating web objects.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
July 19, 2011

print this article
SEARCH DEVARTICLES

In this CSS3 animation tutorial, you will learn how to animate HTML elements utilizing the new "animation" property to perform actions such as resizing and rotating web objects.

Although the topic hasn’t garnered the attention generated by other popular features (such as native shadows and rounded corners), the truth is that CSS3 includes a powerful module implemented around the brand new “animation” property, which not surprisingly, can be used for creating all manner of eye-catching animations on web pages.

Unfortunately, at the present time the property is only supported by web-kit based browsers like Safari and Chrome, even though other browser vendors will hopefully add themselves to the list in the near future. This shouldn’t be an obstacle, however, for peeking at the abilities offered by CSS animations and see what they can do for us in a few concrete use cases.

In the introductory part of this tutorial I developed a couple of examples, which showed how to use the functionality of the “transition” property, in order to rotate a div in different directions. While the mentioned example was rather contrived, it came in use for demonstrating how simple it is to animate web page elements with CSS, and how easy is to tweak the animation’s arguments as well.

If you missed the last article or need a refresher, you can find it here:

http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Animations-Rotating-Web-Page-Elements/

Speaking of tweaking things here and there, so far I taught you how to create an animation that will be executed only once. It’s fairly easy to implement effects that will be looped several times and even that will run forever (the so-called infinite iteration). Assuming that you’re interested in learning how to achieve all of these tasks, in this final chapter of the tutorial series I’ll be coding some additional examples, which will manipulate the number of iterations assigned to a given animation. And if this doesn’t satisfy your appetite for new stuff, you’ll see how to utilize the power of animations for resizing an HTML element too.

Tweaking the Animation Effects: Altering the Number of Iterations

It’s dead simple to alter the number of iterations assigned to a specific animation. As you may have guessed, this can be done by giving different values to the “-webkit-animation-iteration-count” property, which was discussed in detail in the preceding tutorial.

Of course, the most effective manner to show how to make an animation execute a specified number of times is by means of a concrete example. Thus, in the following lines I coded one, which will infinitely rotate a generic container.

Here’s how this whole new 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 animations (rotating infinitely the target element)</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;
}
/* animated element */
#spinning-element {
    width: 160px;
    height: 160px;
    padding: 20px;
    background-color: #00f;
    -webkit-animation-name: spinElement;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes spinElement {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
#spinning-element p {
    text-indent: -9999px;
}
</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>
    </div>
    <div id="main">
        <div id="spinning-element">
            <p>This element is animated with CSS3...</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>
    </div>
</div>
</body>
</html>

As shown above, creating an animation effect (in this case a simple and banal rotation) that will run forever is reduced to assigning the value “infinite” to the aforementioned “-webkit-animation-iteration-count” property. Naturally, you won’t always want to create “infinite” animations, right? Well, in such cases, it’s possible to assign to the pertinent property different integer values (1, 2, 3.. and so on) according to the number of iterations that you need to have for a given HTML element.

At this point you've seen how easy it is to control the number of times an animation will be repeated during a period of time. But the tweaking process doesn’t stop here, as it’s also feasible to change the duration of the animation as well. From the previous example, it’s clear to see that this behavior is specifically controlled via the “-webkit-animation-duration” property, which was given a value of 4 seconds.

But what if you want the effect to run faster or slower? As one might expect, this can be accomplished by changing the values assigned to the property in question. Therefore, in the coming section I’ll be amending the earlier example, which this time will rotate the same sample container slightly faster.

Going One Step Further: Changing the Animation’s Duration

Changing the speed at which an animation is executed is a straightforward process reduced to assigning the desired value to the “-webkit-animation-duration” property. In the prior example, the value taken by the property was 4 seconds, which is exactly the time that the target element takes to rotate 360 degrees.

To make things a bit more interesting, below I modified the mentioned example, which now assigns a value of 2 seconds to the animation. Check it out: 

<!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 animations (increasing the rotation speed of the target element)</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;
}
/* animated element */
#spinning-element {
    width: 160px;
    height: 160px;
    padding: 20px;
    background-color: #f00;
    -webkit-animation-name: spinElement;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes spinElement {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
#spinning-element p {
    text-indent: -9999px;
}
</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>
    </div>
    <div id="main">
        <div id="spinning-element">
            <p>This element is animated with CSS3...</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>
    </div>
</div>
</body>
</html>

Even when the implementation of the above animation looks nearly identical to the one discussed in the previous segment, this is only a mistaken impression. Moreover, if you take a close look at the “-webkit-animation-duration” property, you’ll that it effectively takes a value of 2 seconds. While subtle, this change will make the target div rotate slightly faster on the web page. So, if you wish to see for yourself the output that the previous example produces, simply test it using Safari or Chrome. You should be confronted with a red rectangle spinning pretty fast clockwise.

And now that you saw how easy it is to tweak the duration and the number of iterations of an animation, it’s time to move on and create yet another example. So far, I showed you how to rotate an HTML element, which has hopefully been instructive. Nevertheless, animations can be used in many other use cases, including dynamically altering the dimensions of an element. Given that, in the next few lines I’ll be illustrating how to use CSS3 animations, this time altering the width of the earlier sample div.

Developing a Final Example: Changing the Width of an HTML Element

The last example I plan to create here will be aimed at demonstrating how easy it is to alter the dimensions of an HTML element  through the "animation" property. This is a simple process limited to binding the  "-webkit-animation-name" to the set of styles that will achieve the corresponding transformation.

For you to understand the fine details of this process, be sure to take a look at the code sample below:

<!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 animations (resizing the target element)</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;
}
/* animated element */
#resized-element {
    width: 160px;
    height: 160px;
    padding: 20px;
    background-color: #f00;
    -webkit-animation-name: resizeElement;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes resizeElement {
    0% {
        width: 160px;
    }
    50% {
        width: 60px;      
    }
    75% {
       width: 260px; 
    }
    100% {
        width: 160px;
    }
}
#resized-element p {
    text-indent: -9999px;
}
</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>
    </div>
    <div id="main">
        <div id="resized-element">
            <p>This element is animated with CSS3...</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>
    </div>
</div>
</body>
</html>

Although at first sight the above code looks somewhat complex and intimidating, all it does is use the “animation” property for sequentially altering the width of a generic container. The logic behind this process can be seen in detail in the following fragment:

@-webkit-keyframes resizeElement {
    0% {
        width: 160px;
    }
    50% {
        width: 60px;      
    }
    75% {
       width: 260px; 
    }
    100% {
        width: 160px;
    }
}

As this code depicts, the width of the element is expanded and contracted alternately in an infinite loop (notice the value “infinite” assigned to the “-webkit-animation-iteration-count” property), a process that shows that the functionality brought by CSS3 transitions can be used not only for rotating an element on a web page, but for altering its dimensions as well.

To sum up: CSS3 is full of alternatives that will let you enhance the behavior of your web site, including the implementation of transitions and animations. Of course, these are features that should be used with caution due to the lack of solid support by many browser vendors. However, if you feel adventurous and want to surprise your visitors (at least some of them) with something fresh and innovative, animations are definitively an option worth looking at.  

Final Thoughts

We’ve come to the end of this two-part tutorial. Overall, the journey has been didactical, as you learned how to take advantage of the functionality provided by CSS3 animations in order to implement some basic – yet engaging - rotation and resizing effects on a web page.

For obvious reasons, the field of CSS3-based animations is still in its infancy, and quite probably, it will take years to see a solid implementation of it on most modern browsers. However, this should not prevent you from taking a peek at the future right now and seeing the remarkable potential that the new standard has brought to the table.

As you know, it’s hard to foresee what will happen in the terrain of modern web design, but eventually there might be a day where the throne JavaScript is proudly seated upon will be delegated to CSS, at least when it comes to animating web page elements.

See you in the next web design tutorial!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All Style Sheets Tutorials
More By Alejandro Gervasio


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