CSS Transitions – A Little Dab'll Do You
CSS Transitions, when used properly, are a great way to provide a bit of eye candy to your site. Providing movement and motion, either upon scroll or reveal of content, is a great way to subtly draw a viewer’s attention. It’s also a way, unfortunately, to annoy the ever-loving crap out of your readers. When CSS Transitions were first revealed, people worried that they would be used like Flash and… completely junk up the web.
BUT, when used sparingly, CSS Transitions add that last little spark to a site that really makes the difference between a good design and a great design.
Using CSS Transitions
CSS Transitions are actually extremely easy to use. As the name suggests, everything is done via CSS, so there’s no jQuery or any other languages to know. The only things you need to be aware of are syntax and flow of the transition.
We’ll start with an extremely simple example: using transitions to create a button that “glows” when you hover over it.
The Initial CSS
We’re going to create a simple button for the base of our CSS transition. To do that, we’ll have a bit of CSS:
a.demobutton{
background: black;
display: inline-block;
border-radius: 12px;
color: white;
padding: 12px;
}
This is a very basic button and, to be honest, the style itself doesn’t matter as much as the CSS transitions we’re adding to it. Next, we want to set the “hover color” of the link.
a.demobutton:hover{
background: #09f;
}
Once you hover over the button, the background color will turn a nice blue color. But, as you hover over it, it’ll turn blue instantly – we want to smooth that out a bit.
The Additional CSS
a.demobutton{ background: black; display: inline-block; border-radius: 12px; color: white; padding: 12px; -webkit-transition: .25s all ease-in-out; transition: .25s all ease-in-out; }
Let’s break this down:
The first thing you’ll realize is that we’ve added two lines of code to the button that say, basically, the same thing – the difference is the beginning piece of the code. This “vendor prefix” is a spec of CSS that tells certain browsers to behave in certain ways. -webkit-, for example, is the Safari / Chrome vendor prefix. There’s also -moz-, -o-, and -ms- (which are Mozilla/Firefox, Opera, and Microsoft/IE respectively), but in this case, the CSS transitions for those will work with the standard code (in all honesty, the -webkit- is unnecessary, but I put it in to have a reason to talk about vendor prefixes).
Next, a string of values (width, 2s, ease-in-out). The first value is the time limit. This goes in seconds (in this case, two seconds), but can be divided into fractions of a second (0.25s).
The second value of the CSS transition tag is the CSS attribute that we will be modifying. We can either use a specific value (width, height, display, border, etc) or we can catch all of the attributes we define with the “all” tag.
The final value is the “speed curve”, known in the spec as the “timing-function”. This can be defined as a “graphical description” of what the speed does. If you want to see the various timing functions demonstrated, head over to The Art of Web and scroll down nearly half-way. The balloons all “rise” according to the various timing functions. For me, “ease-in-out” seems to be my favorite, as it’s a nice balance between a default speed and having it be “zippier” toward the middle of the animation. Think of it like a car starting, driving, and then stopping – you accelerate to speed, and brake to stop, but it’s not instant. That’s ease-in-out in a nutshell.
Notice that we’ve added the code to the initial CSS, and not the hover CSS. That’s because we want the browser to register the transition before we hover the effects we want to apply.
And that’s it – it’s really just that simple. Only a few lines of code, but CSS transitions add a lot of character to your styles with just a touch of motion – the perfect complement to any modern design.
What’s your favorite use of CSS Animations? And, conversely, have you seen any websites that just take it too far?