All posts by admin

CSS3 Transitions, Transforms, and Animations

(…or why CSS3’s transition, transform, and translate always confuse me)

Maybe it’s me and maybe it’s because I don’t use them all the time, or maybe it’s because they kind of sound alike, but CSS transitions, transforms, and translations tend confuse me, especially since I don’t use them daily. And they all start with “trans”. And in case you were wondering which is used more often, Google shows nearly 100% more results for transitions as for transforms.

So how are transitions and transforms different? In a nutshell:

  • A CSS Transition allows property (e.g. opacity, width, color) changes to occur between two states over a specified duration.
  • A CSS Transform allows elements to be transformed (e.g. scale, rotate, translate, and skew) in 2D or 3D space.


CSS’s transitions are a great, easy way to change an element’s property (e.g. width or height) instantly, or over a period of time. This can be done by adding or removing a class from an element, or by using pseudo-classes like :hover. They can be used with or without JavaScript to create tons of effects.

Like background, margin, and padding, the CSS transition property is actually shorthand for four other properties: transition-property, transition-duration, transition-timing-function, and transition-delay.

  • transition-property
    transition-property: background;
  • transition-duration
    transition-duration: 0.3s;
  • transition-timing-function (ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(<integer>[, [ start, end ] ]?), and cubic-bezier(<number>, <number>, <number>, <number>)). You may specify multiple timing functions; each one will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. If there are fewer functions specified than in the master list, missing values are set to the initial value (ease). If there are more timing functions, the list is simply truncated to the right size. In both case the CSS declaration stays valid.:
    transition-timing-function: ease;
  • transition-delay
    transition-delay: 0.5s;


  • transition (no delay)
    transition: background 0.3s ease;
  • transition (with .5 second delay)
    Ex: transition: background 0.3s ease .5s;
  • Multiple transitions can be combined and separated with a comma:
    transition: background 0.3s ease .5s, color .2s linear;
  • The keyword all can be used to transition all properties without having to delineate them.
    transition: all 0.3s ease;

Transitions are usually placed on the normal state of an element, and the change, triggered by a hover, click etc., invokes the change.

For example, on an image we might apply:

 background: red;
 transition: background 1s ease 0.5s;
div:hover {

Example: (hover over the square)

We typically place transitions on the normal state of the element instead of on the rule that triggers the change (e.g. the hover state) which may seem like a more intuitive thing to do. But why?

While you can place transitions on the changed state of an element (:hover, :active, etc.), placing them on the normal state allows you to save code, without having to rewrite the rules for each separate state/trigger, and it also allows the transition to occur in both directions.

For example, if we moved the transition rule from the above example from the div selector to the div:hover selector like:

div:hover {
 transition: background 1s ease 0.5s;

We’d get the animated color change when hovering over the div, but when hovering out, the change would be abrupt, since the hover state essentially doesn’t exist, and neither does the transition rule. The hover state is binary, it either exists or it doesn’t, and by placing the transition rule on the hover state, it ceases to exist when the hover state doesn’t exist.

As Dan Cederholm points out, “…you may want the transition to also happen on the :focus or :active pseudo-classes of the link as well. Instead of having to add the transition property stack to each of those declarations, the transition instructions are attached to the normal state and therefore declared only once.”

Remember that since not all browsers have implemented the formal transition rules that you may need to use browser-specific prefixes (-webkit-, -moz-, -ms-, -o-) when building your rules.

Here’s a handy list of all the CSS properties that can be transitioned (animated):

Transforms (2D)

Transforms (as opposed to transitions) allow you to manipulate elements in 2D/3D space.

When basing transforms on the state of an element (e.g. :hover, :active, :focus, etc.), unlike transitions, transforms get added to the changed state of an element.

You can use transform and transitions together. For example, you could create a transform that scales an element by 150%, and then couple that with a transition that will animate it. To use a transition with a transform, you just specify the transform as the property that you want to transition:

transition: transform 0.2s ease-in-out;

Common Transforms

Scale – Default scaling is from the center. Use transform-origin to change the center point.

transform: scale(1.5);

Translate – Moves an element from its normal position. Shorthand for translateX(x) and translateY(y)

transform: translateX(150px); /* or translate(150px, 200px)*/

Skew – Skews an element from its normal position. Shorthand for skewX(x) and skewY(y)

transform: skewX(150pxdeg); /* or skew(40deg, 20deg)*/

Matrix – Specifies a 2D transformation matrix comprised of the specified six values. To be honest, I have no experience using this, and have rarely seen it used. That’s not to say it’s not useful and could do some wonderful and amazing things. It’s just that I have yet to notice any. For a nice explanation, see

Combining Transforms

Multiple transforms can be combined into one statement by separating each with a space.

transform: scale(1.5) rotate(-10deg);


And here’s a handy list of all the 2D and 3D CSS transform functions:

Lost in Translation

For an example of why you might want to use translate over the top/right/bottom/left position rules see this article by Paul Irish. Transition, transform, and translate – easy to use but tough to separate in your head.

3D Transforms!

3D CSS transforms are quite similar to, and in some cases the same as, 2D transforms.

See for the current list of 3D transforms.

In the browser’s 3D space, the x-axis runs horizontally, the y-axis runs vertically, and the z-axis runs perpendicular to the screen (with positive values being closer to the viewer and negative values being farther away).

I’m not going to go into the topic of 3D transforms since it’s already been done quite well by and and it could warrant a small book on its own, however here’s one simple example that uses several of the techniques I’ve outlined above:


You might think that what we’ve discussed so far is already a type of animation, and you’d be right. But they’re very basic, and you can create animations more advanced than what CSS transitions provide by using CSS animations.

To use animations you’ll need to get familiar with CSS keyframes. I’ll only touch on CSS animations for now to give you an idea of how they can be used, and go into more depth in the future.

CSS keyframes can be thought of as a specialized @-rule that wraps a set of property changes (at least two) over a duration. Note that like most of the newer CSS technology you’ll usually need to use vendor-specific prefixes (e.g. @-webkit-keyframes, @-moz-keyframes) in addition to the hopefully future standard @keyframes.


@-webkit-keyframes throb {
 0% {
 -webkit-box-shadow: 0 0 0 50px 50px rgba(50, 160, 50, 0.2);
 50% {
 -webkit-box-shadow: 0 0 50px 50px rgba(50, 160, 50, 0.9);
 100% {
 -webkit-box-shadow: 0 0 50px 50px rgba(50, 160, 50, 0.2);

This creates the “throb” rule with three keyframes in the animation. here we increase and decrease the opacity of a div’s box-shadow property. 0% (a.k.a “from”) is the start of the animation and 100% (a.k.a “to”) is the end. By itself this rule won’t do anything. To actually animate the element, we need a separate animation (-webkit-, -moz-, …) rule.

The second part of an animation references the keyframe we created by name (e.g. “throb”), sets the duration for the keyframe to run, and the number of times to execute it, with an optional easing effect.

div {
 -webkit-animation: throb 1.5s infinite ease-in-out;
 -moz-animation: throb 1.5s infinite ease-in-out;
 animation: throb 1.5s infinite ease-in-out;

This is the shorthand notation for animation. The same rule could’ve been written as:

div {
 -webkit-animation-name: throb;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;

Examples: and

This is just the tip of the animation iceberg. For more information, check out

As you can see, CSS Transitions, transforms, and animations are a lightweight and easy to use alternative to other HTML element manipulation tools.

Is There A Hall Of Shame For Usability?

(Disclaimer: The following post will be the tallest post I have ever written)

If you’re wondering what that blue line a few paragraph down is, I’ll start by telling you that it’s not a blue line. It’s the Wi-Fi agreement for Kohl’s free in-store Wi-Fi access. No, really. If there isn’t a hall of shame for usability, there should be. I’m no user interface or user experience guru, but I’m pretty sure that I can recognize a bad interface experience when I see it. Which brings me to something as simple as Kohl’s free Wi-Fi login page (which you can see in all its glory after the break). So that blue line is actually a thumbnail of the scaled down version of the full user agreement image which you can see here. Just to get on Kohl’s Wi-Fi.

The image that I’ve posted is scaled down to 240 × 23508.  That’s scaled down from the original 640 x 62688 that I screen grabbed with my iPhone (which was not easy let me tell you). Not only did it take at least five minutes to screen cap, but to re-assemble it took more time than I’m going to admit.

So let’s take a minute and think about this. You go into Kohl’s and want to hop on their Wi-Fi. No biggie right? What most people do is probably the same thing they do when they see anything that looks like a EULA; scroll to the bottom, ignore it, and agree. Scroll past all sixty two thousand pixels of agreement.


Swipe, swipe, swipe (repeat 20 more time) and you could easily have agreed to anything if you scrolled down and did’t read the agreement. And I’d be willing to bet big money that virtually no one actually does read the damned thing. Who has the time? Does anyone in Kohls’ legal or IT departments think that people actually come into their store, see the agreement, spend the next 15 minutes reading it, and then start shopping? Am I supposed to grab a coffee, find a seat, and peruse this novella while educating myself on Kohls’ policy on cotton from Uzbekistan (it’s in there) or the clean diamonds trade act (it’s in there too)? How does this even apply to me using their Wi-Fi? Shit, all I wanted to do was get on Wi-Fi so I could check Twitter and email so I don’t hit the damned data cap on my overpriced Verizon account.

Sixty two thousand pixels.

Welcome to Kohl’s.

Whoever thought this up and green lighted it should be dipped in honey, rolled in sugar, and tied to an ant hill. Why would I need to swipe through the Magna Carta just to get on Wi-Fi? Kohl’s can’t seriously expect anyone to read this, at least not in its entirety, so why bother putting it up in the first place? At best, the only reason I could come up with is that Kohl’s lawyers must believe that by putting every possible “cover your ass” clause and warning under the sun in front of their Wi-Fi access, that they believe that they’re indemnified from any damages that might occur. When I go to Starbucks, Panera, or any of the increasing number of places that provide free Wi-Fi, I am typically greeted with a single page of text, maybe a checkbox to agree to their terms, and a button to sign on. Quick and easy. Exactly like Wi-Fi. Why can’t Kohl’s do that? Do they know something that all these other places don’t?

So if anyone can explain to me the logic behind this, I would love to hear it.

Continue reading Is There A Hall Of Shame For Usability?