Category Archives: CSS

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.

Bootstrap 3.2.0 Quick Reference & Notes

An abridged list of the most commonly used Bootstrap code and features (by me)

Over the past couple of months, I’ve been exploring and getting familiar with Bootstrap. During this time I’ve been keeping notes on some of the sticking points I encountered, along with useful tips and commonly used features I’ve learned from testing Bootstrap and reading various online tutorials. Here I present a quick reference of sorts of what I’ve found to be the most useful, and frequently used, parts of Bootstrap. If you find an error, or would like me to add something that you find useful, post a comment or email me.

Text (example)

  • Text alignment classes: .text-left, .text-center.text-right, and .text-justify. These map to the CSS text-align property.  Example: <p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p>
  • Paragraphs (and presumably other text elements) can be make to stand out with the .lead class, which sets the font size and weight, line-height, and bottom margin.
  • In headings (<h1>-<h6>) you can create lighter, secondary text with a generic <small> tag or the .small class.
    Example: <h3>h3. Bootstrap heading <small>Secondary text</small></h3>

Lists (example)

  • To have Bootstrap remove the default styling on a list (ordered and unordered), add the .list-unstyled class. Note that this only applies to immediate children list items, meaning you will need to add the class for any nested lists as well. Example: <ul class="list-unstyled">
  • Display list items horizontally using the .list-inline class. This uses display:inline-block and some padding. Example: <ul class="list-inline">
  • Make description lists (a.k.a definiton lists) two columns by using the .dl-horizontal class. Example: <dl class="dl-horizontal">

Tables (example)

  • For basic styling – light padding and only horizontal dividers – add the base class .table to any <table>
  • For zebra-striping rows, add the class .table-striped to the table.
  • For borders on all sides of the table and cells, add the class .table-bordered to the table.
  • To enable a hover state on table rows within a <tbody>, add the .table-hover class to the table.
  • To make tables more compact by cutting cell padding in half, add the .table-condensed class to the table.
  • Contextual classes for table rows or cells: .active,  .success, .info, .warning, .danger.
  • Create responsive tables by wrapping any table in .table-responsive to make them scroll horizontally on small devices (< 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Forms (example)

  • Bootstrap has three main form layouts. Normal (vertical with labels above inputs), horizontal (labels to the left of inputs), and inline (like horizontal but with form controls not using 100% width)
  • Wrap form controls (label, input, textarea, select) in divs and give the div the class .form-group (Note: checkboxes and radio buttons instead get the checkbox or radio class respectively). This sets extra bottom margin on grouped form elements and allows changing orientation more easily. Don’t forget to add labels to your controls.
  • Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
  • Give form controls (input, textarea, select) the class .form-control to pickup Bootstrap styling.
  • In form inputs you can use .input-lg and .input-sm for taller or shorter form controls.
  • Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.
  •  Style buttons with the .btn class.
    • You can also add .btn-default, .btn-primary.btn-success, .btn-info, .btn-warning.btn-danger, and .btn-link. Example: <button type="button" class="btn btn-danger">Danger</button>
    • Button size classes: .btn-lg, .btn-md.btn-sm, .btn-xs. For block level (full-width) buttons, use .btn-block. Example: <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
  • All textual <input>, <textarea>, and <select> elements with the .form-control class are set to width: 100%; by default.
  • Use Bootstrap’s predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
  • Give form controls the class .form-control. This applies various styles including 100% width.
  • Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

Images (example)

  • Images can be made responsive by adding the .img-responsive class which add a max-width:100% and height:auto;. You can also give images shapes with the .img-rounded, .img-circle, and .img-thumbnail classes.

Grids/Columns (example)

  • Rows (typically divs with the class .rowmust be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. Use rows to create horizontal groups of columns. Columns should total no more than 12 per row per size. Example: <div class="col-md-8">.col-md-8</div><div class="col-md-4">.col-md-4</div>
  • Content should be placed within columns, and only columns may be children of rows.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-x class is not present. Columns stack on smaller screens. Don’t want stacking? Apply classes for smaller resolutions in addition to the larger resolutions like <div class="col-xs-6 col-md-4">.
  • Columns can be moved to the right using: .col-xs-offset-*.col-sm-offset-*, .col-md-offset-*, and .col-lg-offset-*. These classes increase the left margin of a column by X columns. For example, .col-md-offset-4 moves the column over by four columns. Another example, <div class="col-md-6 col-md-offset-3"> moves a six column wide column over by three columns.
  • The order of columns can be changed via the .col-md-push-* (pushes to the right) and .col-md-pull-* (pulls to the left) classes.


  • Easily center a page’s contents by wrapping it in an element (e.g. div) with the .container class. Containers set width at various media query breakpoints to match the Bootstrap grid system.
  • For multi-line blocks of code, you can use the .pre-scrollable class to create a scrollable, 350px (max) tall block.
  • General purpose text color classes: .text-muted, .text-primary.text-success, .text-info, .text-warning, and .text-danger.
  • General purpose background color classes:, .bg-info, .bg-warning, and .bg-danger.
  • Floating left and right can be accomplished with the .pull-left and .pull-right classes respectively.
  • The class .sr-only will hide all elements with the class to all devices except screen readers.
  • Mobile specific classes:
    • Visible only on the specified screen size: .visible-*-block.visible-*-inline, and .visible-*-inline-block. So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.
    • (Deprecated as of 3.2.0, but still usable) Visible only on the specified screen size: .visible-xs, .visible-sm, .visible-md, and .visible-lg.
    • Hidden only on the specified screen size: .hidden-xs.hidden-sm, .hidden-md, and .hidden-lg.
  • Printer classes: .visible-print-block, .visible-print-inline.visible-print-inline-block and .visible-print (deprecated as of 3.2.0) and .hidden-print.
  • Current media query breakpoint widths (in pixels): xs < 768, sm >=768, md >=992, lg >=1200.
  • To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>. <meta name="viewport" content="width=device-width, initial-scale=1">. To disable zooming (not recommended), you can add the parameters user-scalable=no for a more app-like feel.
  • Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label.form-control, and .help-block within that element will receive the validation styles.
  • Style anchors to look like buttons by using button classes. Example: <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
  • Button classes can be used on <a>, <button>, and <input>.
  • Add the bootstrap theme for visual enhancements. See and

A Final Note:

Bootstrap is a starting point. An excellent one, but a starting point nonetheless. You are by no means constrained by anything that it provides, and you can override anything it sets. Always refer to for the latest info, more examples, and advanced topics.

The Flick Scroller

Sometime last year I came across an image carousel on an Italian website done in Flash that allowed you to scroll a set of images horizontally with the flick of your mouse. What I loved about it was how natural and intuitive it felt. The gallery of images was infinite, meaning that the same X number of images would repeat no matter how often you scrolled it. The obvious downsides were that it was done in Flash and not mobile friendly.

I’ve been working on and off since then to replicate the effect, as well as improve upon it. I finally have a non-Flash solution that uses jQuery to achieve the effect both on desktops and mobile devices that doesn’t require any other libraries and is super slim. I love the infinite scrolling effect in use here which relies on an optical illusion of sorts.

I’m posting the first examples here and would like your feedback to see if I should turn this into a jQuery plugin. I’m also open to some suggestions in terms of a name. I like the “flick” part, but struggle with calling this a carousel, gallery,scroller, or something else.


A caveat: The only downside I’ve discovered so far lies in mobile Safari. I have seen the scroller start off and work fine in this browser, yet cease to respond after a few flicks. Unfortunately I seem to have no way to debug mobile Safari, so if anyone can shed light onto the issue I’d be happy to update the code.

Free Tools to Make a Web Developer’s (and Designer’s) Life Easier

Who doesn’t love free stuff? Most of the time the saying “you get what you pay for” applies, but every once in awhile sometimes you do get a free lunch. Whether it’s testing jQuery code, checking to see how a site looks in different browsers, or coming up with a color scheme, the following free tools have been extremely valuable in helping me get my work done.


Originally developed by Sun, Oracle’s VirtualBox is a great piece of free software.Let me repeat that. Great piece of free software. It’s so good they should charge for it. Really.  In case you’re unfamiliar with VirtualBox or virtualization in general, what VirtualBox does is allows you to turn one computer into as many different computers as you like by giving you the ability to run almost any operating system as if it were an application. No dual booting, no partitioning, no reformatting. You can create and destroy virtual machines at will.

So why is this great? Continue reading Free Tools to Make a Web Developer’s (and Designer’s) Life Easier

A Guide to CSS2 and CSS3 Pseudo-classes and Pseudo-elements

While the term “pseudo-class” might not instantly evoke what it refers to, virtually every web developer and web designer has used them. The classic example of pseudo-classes involves styling links based on the state that they’re in (hover, active, etc.). CSS3 introduces over a dozen new CSS pseudo classes to give you more control over targeting and styling elements. CSS2 pseudo-classes still work in CSS3, and CSS2’s pseudo elements are virtually unchanged in CSS3 (see the last paragraph). Below is a chart that outlines pseudo-classes in CSS2 and CSS3 with new CSS3 pseudo-classes in bold. Continue reading A Guide to CSS2 and CSS3 Pseudo-classes and Pseudo-elements