CSS Animations

There are two ways to animate things with CSS. One is with the transition property. The other way is with the by creating a keyframe animation and the animation property. This video and article are referring to the Animation method.

CSS Animations require two things to work. First you need to set up the animation and it’s keyframes. Second, you need to call or use the animation and set up it’s properties, such as the duration of the animation, how many times it should run, it’s easing method and more.

Set Up the Animation

As of today, only webkit browsers need the prefix. IE, Opera, and Firefox all work off of the un-prefixed code.

Fade In and Out

Shrink and Grow

Move

Change Colors

Use the Animation

Performance

There is a lot of discussion around what is better to use for animations – CSS or Javascript. I don’t really have the answer to that. Animations are a complex topic and in general you may need to factor in the type of animation you are creating, who your audience is, and what devices the site is viewed on, etc. If you want to read more about performance, you can try this article: High Performance Animations or this one: Myth Busting Mythbusted

Browser Support

CSS Animations work in IE 10 and above. They also work in all other modern desktop browsers. On mobile devices they work in everything except Opera Mini. See caniuse.com for specifics. If it is important that your animation works in earlier versions of IE, you may still want to use Javascript for your animations.

Box Sizing – Make width = width

Box-sizing solves a problem that has been making front-end development more confusing for years. The problem is when you add padding and borders to elements on your page, the layouts will often break or in general cause things to look different than you expected. If you change the box-sizing value to be border-box the padding and width of the element will be contained inside of the specified element’s width, instead of adding it to the width like the default behavior of content-box.

The box-sizing property is such a great little solution Chris Coyier decided to declare February 1st as International box-sizing awareness day. I’m a little bit late for that, but I do want to include this little snippet here and do my part to help promote the usefulness of this property.

Here is a video that demos the issue and how useful box-sizing can be.

Useful Links

Paul Irish on Box Sizing
The MDN Reference