How to use Transitions in CSS3

So CSS3 is getting a lot of hype right now & I've been playing around with a few new features, One of them being CSS Transitions. As you can probably tell from the name it's a way to animate between an "on" state and an "off" state. Now this will only work in Safari but has a nice fall-back for other browsers(which we'll talk about).

How to use it

Like most new properties in CSS3 it uses a browser extension Ex: -moz-box-shadow.


a { color: #999; -webkit-transition: color 0.3s linear; }
a:hover { color: #000; }

At first, it was a little confusing but I'm used to it now. First, you declare what property you want to animate between, the amount of time it will take to go from "off" to "on", & the easing. If you're familiar with After Effects, easing will make much more sense to you at first. If you aren't, all it is, is the interpolation between the two points(It'll go fast then ease into the "on" state or visa-versa). The other properties you can pass into it are ease-in, & ease-out.

The nice thing about using this is that it has a really nice fall-back for older browsers or browsers that us not support it. It just does a hard change from "off" to "on". Not a big deal but you just don't get that extra level of niceness.

Back Up & Running

You might have noticed that I took a little break threre—sorry—but I'm back and ready togo. I haven't been posting for awhile because the hp I was running on died… ya. So after a few trips to Best Buy & a whole weekend of talking my parents into getting me one I am now happy to announce that my a Mac! I got the new 27"(Which is amazing!) iMac & it's awesome.

Read More

Sketch of the Week #1

In an attempt at improving my drawing ability, I've decided that I'm going to start a new series called The Sketch of the Week. As the name implies it's a weekly sketch by me. This will hopefully turn blogging into a regular thing for me since I've been putting it off. The sketches will start today but will normally be posted on Friday. This should give me enough time to draw at school.

Read More
Going Up?