News

Create an animated icon with CSS

Emulate the cool animated CSS effect found on the iuvo website.

iuvo950

iuvo950

inspiration www.iuvo.si

When searching for the right words to describe a website or technique used on a page, just occasionally there will be a word that fits perfectly for each of the word’s definitions. For Jan Zavri’s iuvo.si site, that word has to be ‘flourish’.

The word suggests healthy and vigorous growth, especially as the result wof a congenial environment and this well thought out and beautifully presented site is certainly that. Flourishing also describes the act of ‘waving’ something to attract attention; with the animated icons on the homepage rotating dramatically as the page finishes loading. These well placed animations are a great way to instantly attract a visitor’s attention.

TECHNIQUE

The animated rollover button

Are you game?

The technique uses the ever-popular zombie theme for its subject and the visitor is invited to choose between a gun, a hunting knife or a chainsaw. The HTML head sets the page title and links to the stylesheet.

001    <!DOCTYPE html>
002    <html>
003    <head>
004            <meta charset=”utf-8”>
005            <title>Zombie Time - 
Choose your weapon</title>
006            <link href=”css/style.css” 
rel=”stylesheet”>
007    </head>

Front and centre

The content sits inside an inner <div> inside an outer <div> to conveniently centre it on the page. The weapon icons are assigned the ‘.rotate’ class and that’s really all there is to the HTML file.

001    <body>
002            <div class=”outer-div”>
003                <div class=”inner-div”>
004                <h3><a href=
005                “https://www.flickr.com/photos
/mhogan35/6004524648/in/
set-72157629484097771”>
006                Image by Matthew Hogan 
licensed for use under 
Creative Commons</a></h3>
007                <h1>It’s Zombie Time</h1>
008                <h2>Choose your weapon</h2>
009    <img class=”rotate” height=”300px” 
src=”images/1.svg” width=”300px”> 
010    <img class=”rotate” height=”300px” 
src=”images/2.svg” width=”300px”> 
011    <img class=”rotate” height=”300px” 
src=”images/3.svg” width=”300px”>
</div>
012            </div>
013    </body>
014    </html>

Fonts and background

In the stylesheet a suitable zombie-like font is chosen for the background together with the now-familiar code for setting a full-page background image. The image is by the very talented Matthew Hogan, used under Creative Commons licence and linked to from the HTML.

001    @import url(http://fonts.googleapis.
com/css?family=Nosifer|Exo);
002    html { 
003      background: url(../images/zombie.
jpg) no-repeat center center fixed;
004      -webkit-background-size: cover;
005      -moz-background-size: cover;
006      -o-background-size: cover;
007      background-size: cover;
008      color: #fff;
009    }
010    

The .rotate class

Skipping over the styling of the text for a moment and focusing on the animation, all we’ve done in the following code snippet is make sure that the duration of the spin effect is set at 0.8 seconds, while transform is targeted as the transition property.

001    .rotate {
002        -webkit-transition-duration: 0.8s;
003        -moz-transition-duration: 0.8s;
004        -o-transition-duration: 0.8s;
005        transition-duration: 0.8s;
006        -webkit-transition-property: -
webkit-transform;
007        -moz-transition-property: -moz-
transform;
008        -o-transition-property: -
o-transform;
009        transition-property: transform;
010    }    

You spin me round

Finally, two transforms are added to the element when it is hovered: a 360-degree rotation and a scale growing its size by 30 per cent. The elements simply return to their non-transformed state when no longer hovered in the same transition-duration, ie 0.8 secs. That’s all there is to it! You now have an animated icon button – but use it sparingly for maximum effect.

×