This Week in L2Code: CSS Animation & Vendor Prefixes

Listening: Danny Norbury
Drinking: Mi Lan Xiang Dancong Oolong from Bitterleaf Teas

CSS Animations, Best Served With Food (run in new window)

CSS Animation Basics

Transitions have become such a huge part of the web now, that we may not even notice them. Most common is probably the button — that seamless fade to another color, or a bounce, or slide, or even a 3D appearance that is actually a trick of box-shadowing, such as in my pen here:

3D Button (run in new window)

I was also reminded of a lesson today that I’m quite fond of, that you may or not not be fond of as well — just because something can be done, does not mean that it should be done.

There are a ton of properties that can be animated. But the consensus is that only four of them should be, if you value load time, reliability, and ease-of-use: opacity, translate, rotate, scale. This is a fantastic article on what, why, and how.

There also exist some really great tools out there to help you with your CSS animations. I really like this custom easing generator by Matthew Lein, but if you prefer the more standard approach, easings.net or MDN’s page on eases are probably your best bet. Can you tell that I’m fond of eases?

There are also a couple of great tools that everyone needs to be using in their CSS, because if you’re not, then you’re either doing way too much work, or you’re not creating CSS that everyone can enjoy. I’m guilty of this in my earlier work, but will be going back to rectify that.

Auto-Prefixer

You may have heard of vendor prefixes or browser prefixes. These are must-haves if you desire your work to be viewable across all devices. They tell that browser what to do with the information it is given, and if it can’t do that thing, then gives it a similar thing. It is very much the same as working with font-family.

body {
    font-family: 'Tenor Sans', sans-serif;
}

sans-serif is the equivalent of the vendor prefix here, as it is telling the browser, “Hey, if you don’t have this font, use whatever your default sans-serif is”. Check it out (from Auto-Prefixer):

.example {
    display: flex;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

In order to ensure that all browsers can view this content properly, this becomes:

.example {
    display: -webkit-box;     
    display: -ms-flexbox;     
    display: flex;     
    -webkit-transition: all .5s;     
    -o-transition: all .5s;     
    transition: all .5s;     
    -webkit-user-select: none;        
    -moz-user-select: none;         
    -ms-user-select: none;             
    user-select: none;     
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));     
    background: -webkit-linear-gradient(top, white, black);    
    background: -o-linear-gradient(top, white, black);     background: linear-gradient(to bottom, white, black); 
}

Can you imagine typing all of that by hand?

You may be thinking, “Well, that really clutters up my code…” You’re not going to write your code in this format, religiously going back-and-forth between your IDE and Auto Prefixer for every instance you need it in. Rather, you write your code as normal and simply paste your entire CSS document into the website and plug it in. Better yet, you can keep your original code clean and take your new Auto Prefixed CSS over to…

CSS Minifier

You may look at CSS Minifier’s output as a wall of blurbs. And you’re right. It’s not really meant for you to use. It’s meant for the browser/device to read more quickly. All that empty space we use to format code for human readability isn’t so great for processing speeds, apparently. It’s bad enough we have to write code in human language — give your device a break and minify that CSS!

Our example Auto Prefixed code above, once run through CSS Minifier, becomes:

.example{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:-webkit-gradient(linear,left top,left bottom,from(white),to(black));background:-webkit-linear-gradient(top,#fff,#000);background:-o-linear-gradient(top,#fff,#000);background:linear-gradient(to bottom,#fff,#000)}

Using this, you create a new CSS file called filename.min.css and point your HTML to that. Boom!

If you’re interested in learning more, here’s a great article on the topic.

Thanks for reading! See you next time!