Introduction to CSS3 Animation

CSS3 is the latest iteration for CSS. A little history lesson on animation in CSS…animation was first introduced by Webkit in 2007, and slowly over the years browsers like Firefox, Chrome, Internet Explorer and Safari began to support it. CSS3 animation module became increasingly popular due its ease of use, and readability. Writing syntax for CSS3 animation is also incredibly easy, so if you want to add a nice visual effect to a web-page, I invite you to read on to learn more!

Related: Mini Tutorial: 5 Tips for Better Shopify Theming

CSS3 Animation 101

css3 animation

Browser Support

CSS3 Animations currently works in: Chrome, Firefox 5+, Safari 4+, Opera 12+, IE 10+. With that being said you might want support for Internet Explorer 9, unfortunately CSS3 animation doesn’t play nice with IE 9 so you’re just going to have to leverage it with some jQuery/JavaScript.

Syntax

The great thing about CSS3 animation is the syntax is not incredibly hard to write or read. Let’s go through this example.
CSS

@-webkit-keyframes name-goes-here {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes name-goes-here  {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes name-goes-here  {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes name-goes-here  {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

So what’s going on here?

@keyframes starts your animation and then after that you may name your animation whatever you like. Inside the { } that’s where the magic happens.

Magic
So at “0%” the first frame your element will be invisible because the opacity is set to 0. At “100%” the opacity is set to 1. So what that means in between those frames CSS3 will do the heavy lifting and animate the element from being invisible to completely visible, making it look like it’s fading in. Please note: You are also able to target frames in between 0-100% (ex. 24%, 77%, etc.)

But why are we writing it out multiple times?

We’re making sure it works on multiple browsers. (Firefox, Safari, etc.)

But wait, there’s more!

#boxy {
  -webkit-animation: name-goes-here 5s infinite; 
  -moz-animation:    name-goes-here 5s infinite; 
  -o-animation:      name-goes-here 5s infinite; 
  animation:         name-goes-here 5s infinite;
}

Pretty easy to read, you’re just applying the animation to the boxy element and saying the animation should take 5s long and loop infinitely.

Additional CSS3 Animation Syntax

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

CSS3 Animation Shorthand

You can use these properties in shorthand form:

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

You just need to space out all the individual values like in my example that I used earlier.

“-webkit-animation: name-goes-here 5s infinite; “

Don’t Stop Here!

New CSS3 properties have really opened the door to developers and designers in terms of what you can accomplish with animation. Interactivity is at your finger-tips, and thanks to CSS3 you can now replace all those old Flash or image-based animations that slow your site down. I know I’ve scratched the surface on what CSS3 Animations can achieve, hopefully this post will peak your interest and you can let your creativity shine by starting to write your own animations.

Related: eCommerce Sites Gone Wrong – 5 Simple Actionable Solutions