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..
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!"...
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.
: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..
In fact, if you use my CSS-INIT, it is even simpler! ..
But that's a subject for another day!
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..
Pretty neat. You can do lots of mad stuff with CSS borders if you have the time to tinker. Add CSS transition animations and well, you can see the result!
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..
-webkit-transform: perspective(20rem) rotateY(40deg) skew(0,-4.5deg);
transform: perspective(20rem) rotateY(40deg) skew(0,-4.5deg);
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..
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..
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!