CSS Animation Tricks

Back in the days when the web was young, animation was a definite no-no on web pages. To this day, things moving on web pages annoys the hell out of me. But things moving when the user does something, now that's a different story..

Animation enables not only groovy effects, but the ability to change the state of a thing in a way that is pleasing to the eyes and psyche - it's simply less stressful. Not only that, but thoughtful animation can increase the usability of your site in ways that were previously unimaginable. At least, unimaginable without resorting to dodgy Flash and unwieldy JavaScript.

Unstoppable Animations!

CSS animations, while still in the early stages of browser support, offer web designers a vast array of powerful features. And as CSS is something almost no one is disabling in their browser, you can be near-as-dammit certain (for now) that if a browser supports an effect, the user will see it. That's still not something that can be said of JavaScript, and hopefully will never be said of Flash!

And if you do use JavaScript to animate page elements, you can add CSS transitions to not only make those animations smoother, but do most of the painful mathematical calculations for you. Using CSS for animation you basically say, "start there, end there", and the CSS engine works out the between. I suspect we will see a lot more of this in the future.

Everything in transition

The staple tool of CSS animation is the "transition" property. This sets an animation that will occur when an element changes state. Pretty much every active element on the page you are reading now has some kind of transition effect applied to it. Mostly they are so subtle you barely notice them - hovering over a link doesn't instantly change the color of the link, it takes a couple of hundred milliseconds to shift from one state to the other.

This makes page interactions feel much smoother, more refined. Few things in the natural world around us move instantly from one place to the next, there is always a transition between events. With CSS transitions, web pages can be more like nature, i.e. more "natural".

And with a few exceptions (notably, generated CSS "content:" in your main class), everything that changes, can transition. If you have semi-opacity on the normal state, and full opacity on the :hover state, the opacity, too, transitions from one state to the next. Often, it is this combination of transitioning properties that gives the best effect.

Powerful stuff. And once it sinks in, you begin to consider the possibilities of CSS transitions and think "Holy Sheeeet!"...

Examples..

I'm not going to waste time repeating the manual. There are loads of documents out there will give you the details of all the individual properties you can play with. Most are self-explanatory, though often with non-obvious implementations.

Anyone developing anything has the relevant manual on a (preferably keyword-activated) HotKey. Nuff said.

I'm instead going to dive in with a few practical examples of CSS animations I use around this site, and the code used to produce them..

Pushful PayPal Button

I'll start with an easy one. It's a simple but beautiful button, generated almost entirely in CSS, with some nice features, not least of which the way it "comes at you", hopefully inviting the reader to <click> !

Aside from the TradeMark PayPal logo and button text, everything is CSS. If I had the time I would probably sit down and work out how to reproduce the PayPal logo entirely in CSS, but even then, no way every browser is gonna support the fonts so I'm in no great hurry.

So, there is one image..

We draw a border around it with slightly rounded edges, set a gradient background and semi-opacity, add a small drop-shadow, looks like a button.

On :hover, we set the opacity to 100% (fully opaque) and increase the size of the drop-shadow, to give the impression of a thing moving off the page, towards us. Simple.

Then simply add the class to your image tag..

And of course everything has a small transition, to ensure there are no sudden movements!

The CSS is straightforward..

highlighted source generated dynamically with corz distro machine..

/*
    Pushful Pay Buttons (generated version)
    Damn! These make you wanna CLICK!

    Note: these colors are generated form my "oranges" scheme. If you would like
    to see this in different colors, switch schemes at corz.org and load one of
    the site's style sheet (from a page with one of these buttons on it!)

    ;o)

    (c) 2013->tomorrow! ~ cor + corz.org ;o)

    This stylesheet is freely released under the creative commons license:
    <http://creativecommons.org/licenses/by-nc-sa/1.0/>
*/

.pushful-button {
    transition: all 200ms ease-out 0s;
    background-image: -moz-linear-gradient(top, #fff7d1 0%, #FFC44D 85%, #fbb627 100%);
    background-image: -ms-linear-gradient(top, #fff7d1 0%, #FFC44D 85%, #fbb627 100%);
    background-image: -o-linear-gradient(top, #fff7d1 0%, #FFC44D 85%, #fbb627 100%);
    background-image: -webkit-linear-gradient(top, #fff7d1 0%, #FFC44D 85%, #fbb627 100%);
    background-image: linear-gradient(to bottom, #fff7d1 0%, #FFC44D 85%, #fbb627 100%);
    border: .2rem solid #fbac37;
    border-radius: .5rem;
    box-shadow: .5rem .5rem .45rem -.4rem rgba(0,0,0,.33);
    -khtml-opacity: 0.80;
    opacity: 0.80;
    cursor: pointer;
}

.pushful-button:hover {
    position: relative;
    z-index: 300;
    -khtml-opacity: 1;
    opacity: 1;
    box-shadow: 1.4rem 1.2rem 1.2rem -.6rem rgba(0,0,0,.33);
}

In fact, if you use my CSS-INIT, it is even simpler! ..

highlighted source generated dynamically with corz distro machine..

/*
    Pushful Pay Buttons    (original version)
    Damn! These make you wanna CLICK!

    This style sheet will not function correctly in this location, and this is
    by design. Take your web browser to https://corz.org/inc/css/math-test.css
    for an example of how dynamic %%tokens%% and such works.

    ;o)

    (c) 2013->tomorrow! ~ cor + corz.org ;o)

    This stylesheet is freely released under the creative commons license:
    <http://creativecommons.org/licenses/by-nc-sa/1.0/>
*/

.pushful-button {
    transition: all 200ms ease-out 0s;
    border: .2rem solid %%butt_border%%;
    border-radius: .5rem;
    box-shadow: .5rem .5rem .45rem -.4rem %%box_shadow%%;
@@button-gradient(top=%%bg_color%%,middle=%%button_grad_2%%,bottom=%%button_grad_3%%,cutoff=85)@@
@@semi-opaque(o=80)@@
}
.pushful-button:hover {
    position: relative;
    z-index: 300;
    box-shadow: 1.4rem 1.2rem 1.2rem -.6rem %%box_shadow%%;
@@opaque@@
}

But that's a subject for another day!

Moving on..

checksum registration "Help Video"

When I first put out checksum 1.3, I got emails asking how to enter the registration details. So I put a description on the licensing page which I thought was concise, lucid, 100% error-proof, basically saying, "Click the logo!". The emails kept coming.

Then I added a simple graphic, with a touch of CSS Mouse-Over Animation..

The emails stopped.

Yes! CSS animations can not only improve usability, look funky, and so on, but actually save you time and money! Think about it!

While this particular graphic is for a checksum about box, I'm sure you can see the possibilities are vast. It's quite common for developers of any kind, even regular folk, needing to explain how or where to do something with your mouse.

With CSS transitions in our bag of tools, we can not only to draw a pointer, but animate it into position, even write descriptive text on the image, all in CSS.

Here is the HTML Markup..

Yup, it's all happening in CSS!

Here is the code, with notes..

highlighted source generated dynamically with corz distro machine..

/*
    Animated CSS 'Help Video'.

    This sheet produces a neat animation designed to show your users
    where to click an item. The pointer is drawn and animated purely
    in CSS. We also lay some descriptive text over the image, again,
    in CSS.

    (c) 2013->tomorrow! ~ cor + corz.org ;o)

    This stylesheet is freely released under the creative commons license:
    <http://creativecommons.org/licenses/by-nc-sa/1.0/>
*/


#about-box {
    position: relative;
    width: 281px; /* dimensions of background 'about box' image */
    height: 139px;
    background: url("/windows/software/checksum/img/checksum-about-box.png") no-repeat scroll center;
    background-size: 281px;
    box-shadow: 1rem 1rem 0.9rem -0.85rem rgba(0,0,0,.33); /* window 3D shadow effect */
}


/*
    Although technically not visible yet, we separate out the dimensions into
    their own declaration to prevent some browsers (invisbly~~) setting them to
    0,0, causing the animation to fly out from the top-left corner. Same for
    .nw-arrow{}, below.
*/
.logo-click {
    position: absolute;
    width: 5rem; /* position the generated box over the logo.. */
    height: 5rem;
    left: 1.9rem;
    top: 4rem;
}

#about-box:hover > .logo-click {
    transition: all 500ms ease-out 0s;
    font-family: 'Lucida Console', Consolas, 'Courier New', ProFontWindows, monospace;
    text-align: center; /* generated text on hover (below) */
    font-size: 1.3rem;
    color: #261c02;
    box-shadow: 0 0 .9rem #F5A90A; /* blur effect */
    border: solid .2rem #F5A90A;
    border-radius: .1rem;
    background-color: rgba(245,169,10,0.33); /* semi-transparent */
}

/* custom text that appears over the logo */
#about-box:hover > .logo-click::after {
    content: "Click Here!";
    /* you can't put transitions on generated CSS 'content'
       but you can on the parent element - that will do for now */
}


.nw-arrow {
    position: absolute;
    width: 0;
    height: 0;
    left: 4rem;
    top: 7.5rem;
}

/* use skewed border properties to produce an 'arrow'
   and then animate it into position  */
#about-box:hover > .nw-arrow {
    transition: all 500ms ease-out 0s;
    border-style: solid;
    border-width: 1.8rem .65rem 0 2.4rem;
    border-color: white transparent transparent transparent;
    /* along with the mad dimensions, only one 'edge' is visible, which is
       the 'trick'if you make others black, you can see what's happening */
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -o-transform: rotateZ(40deg);
    transform: rotate(40deg);
}

3D Fly-Out Download Box

As the number of "products" I distribute has increased, so has the work surrounding releasing these packages. I love graphic design work, but there are only so many repetitive tasks that one can perform before even the most enjoyable type of work gets choreful.

For every product there is a logo. And then there's all the different sizes for different placements, index, top-of-page, and so on. On top of that, there are images for download icons, a particularly time-consuming aspect of the process.

What if? .. I wondered.. I could produce a SINGLE logo, and use CSS to overlay this one logo anywhere it was needed? The user downloads the image to their browser's cache one time, and thereafter we transform it on the page as required.

Creating new image sizes for indexes and the like is trivial, modern CSS image resizing is excellent, and a single 256 pixel logo can be resized for any button or panel by simply setting its size in your CSS or markup..

Auto Hot-Link logo
Only available in 256 pixel size!

But what about the download boxes?

I've been looking to upgrade to a 3D box for some time, the old one was 3D-ish, but not like this beauty..

Clearly, a simple overlay isn't going to work here. We need to skew and rotate, transform the logo to fit onto one side. Fortunately, CSS has a directive specifically for this, called unsurprisingly, "transform", which enables you to rotate, skew and scale any element in 2D or 3D space. Perfect!

After a little CSS magic..

The logo looks something like this..

Give it a nice sunken edge, set the opacity and such..

And then slap it onto our download box..

Okay! Now we are getting somewhere! But where's the animation? I hear you ask. I'm getting to that..

The finishing touch!

This all looks swell, but lacks the crucial interactive element a download link needs. This is where the animation comes in.

I wanted firstly to have the download "coming at you", which I have previously mentioned, but taken to the max, as well as give the logo prominence in the :hover state. And of course it had to look completely groovy! This is what I devised..

download

Auto-Hot-Link

It can also be used with plain old text..

As can be seen here.

Here is the CSS required, with (hopefully) useful notes, tips and tricks..

highlighted source generated dynamically with corz distro machine..

/*
    My super-groovy 3D fly-out download box..

    I use a generic-ish parcel, and throw 3D-skewed icons over it.
    On hover, they expand up to larger sized icons, covering the entire box,
    front and center. The effect is slick, makes you wanna click.

    (c) 2013->tomorrow! ~ cor + corz.org ;o)

    This stylesheet is freely released under the creative commons license:
    <http://creativecommons.org/licenses/by-nc-sa/1.0/>
*/

.download-box {
    width: 12.8rem;
    height: 10.3rem;
    display: block;
    margin: auto;
    background: url("/img/corz-cardboard-download-box.png") no-repeat scroll center;
    background-size: 100%;
}
.download-box .box-logo {
    transition: all .33s ease-out 0s;
    position: relative;
    display: block;
    width: 4.8rem;
    height: 4.8rem;
    left: 7.8rem;
    top: 3.6rem;
    color: #ffffff;
    font-size: 2.2rem; /* for text-based logos, e.g.. 404 */
    /* this creates a tiny inset border - looks neat, like embossing - the colors are based on parcel brown */
    box-shadow: .1rem .1rem .1rem .01rem #f5f5ef,  -.1rem -.1rem .1rem .01rem #6d7043;
    -webkit-transform: perspective(20rem) rotateY(40deg) skew(0,-4.5deg);
    transform: perspective(20rem) rotateY(40deg) skew(0,-4.5deg);
    /* we set an invisible border so it appears (and grows) with the transformation */
    border: 0 solid #F5A90A;
    -khtml-opacity: 0.75;
    opacity: 0.75;
}

/*    hover *anywhere* to light up the box contents, and much more..
    using this selector syntax, we can name the containing div whatever we like, more protable */
a:hover > .download-box > .box-logo {
    transition: all .33s ease-out 0s;
    background-color: #ffffff;
    border-radius: .6rem;
    color: #F5A90A;
    box-shadow: none;
    border: .3rem solid #F5A90A;
    /*    instead of scale, we could simply set dims and use different translate values, but then we
    would also have to set text sizes and such. This scales *whatever* is in there, uniformly.    */
    -webkit-transform: perspective(0) scale(2.5,2.5) translateX(-1.6rem) translateY(-.6rem);
    transform: perspective(10000rem) scale(2.5,2.5) translateX(-1.6rem) translateY(-.6rem);
    -khtml-opacity: 1;
    opacity: 1;
}

/*    sometimes the containing div is #download, sometimes it's #section-Download, this covers both.
    it will also cause text-based logos to glow at full scale ;o) */
[id$=ownload] a:hover, [id^=download] a:hover {
    text-decoration: none;
    text-shadow: 0 0 1rem #ffffff;
    color: #F5A90A;
}

Conclusion

As with every new development in Web technologies, there are variations in browser implementations, which is to say, some stuff simply doesn't work in some browsers, or works differently.

Usually it's fairly straightforward to work around these things, as I have mostly done in the examples above. Occasionally you just have to accept that users of a certain browser are going to get something different, or nothing at all.

It makes sense then, to not rely on CSS animations to convey your entire message. The above examples will still function with no styles at all. A button or link is still clickable. Mostly this is free-energy from the fact it's "just styles", but keep it in mind if you start using CSS to do crazy transformations.

By the way, I love how, if you drag and (don't) drop one of these animations mid-animation, the dragged icon is of the transitional state, at least in Firefox and Internet Explorer (+ extra weird backgrounds in the latter). On Chromium based browsers you get the image source, which sounds more correct but certainly is less fun.

The Firefox implementation could easily form the basis of an entertaining family game!

for now..

;o) corz.org