Monday, April 27, 2015

CSS3 Animations Are Super Rad, she said animatedly.

Wait. Animation? I though you said AniMOtion...

I don't know if you saw this on the Twitters, but I made a MC Hammer dance party robot*, which you should absolutely check out. If you hate MC Hammer (in which case, we are NOT friends) and/or dance parties and/or robots (in which case, we are not friends, and they will come for you first). Oh, wait. I was in the middle of a sentence, but then I got sidetracked by your horrible friendship. What I was going to say was that the Hammer Bot incorporates a number of different animations - a back and forth movement of the robot, up and down movements of its legs, and flashing eye lights.

So check this - my animations are all motion or color based, but CSS animations are wayyyyy more versatile than that. An animation is essentially defining a change in an element between two styles, so you can animate virtually anything you can style** The motion animations define a change in position, the robots eye animation defines a change in background-color. And, since you can run multiple animations on the same element at the same time, you have an incredible breadth of options. THIS IS SO AWESOME! Check out this fantastic site that shows a ton of effects you can create.

Here's how they work:

There are two distinct steps in creating an animation in CSS. The first is to define the style change itself, the second is to bind it to an element.

Step 1: Defining The Style Change

When defining the style change, you are just defining the beginning and ending state of an element - not timing, not duration, not even which element it applies to, just the change. So let's say you have an image of Odin, the white one-eyed Manx cat who looks like a bunny (I just met this cat in real life, btw) and you want to rotate it 360° forever so that it looks like a merry-go-round with a cat face painted on it. No one would blame you. Defining the style change for this case would be like saying, "I want a thing to rotate 360°."

To do this, you write a keyframe rule in your stylesheet, not nested inside of anything. It would look like this:

@keyframes spin {
  100% { 
    -webkit-transform: rotate(360deg);
@-moz-keyframes spin {100% {-webkit-transform: rotate(360deg);}}
@-webkit-keyframes spin {100% {-moz-transform: rotate(360deg);}}

Let's break that down.

1) Notice how the first keyframe takes up a bunch of room and the next two don't? You can write any of those keyframes either way. Condensing does save space, but I it can also be easier to see what's going on if you use the expanded form.
2) That first @keyframes is the basic keyframe rule, and the second two are there so that the animation plays nice with different browsers. 
3) The spin is just the title you designate for this keyframe. It could just as easily be meowmeow or Odin, but spin is nicely descriptive because all this keyframe is doing is telling something to rotate. Nothing implicitly feline about it. 
4) The 100% will apply to a time duration you will set for the animation when you bind it to an element. This is saying that you want it to do this animation for 100% of the time set aside for animation. If you put 50% there instead, Odin would rotate clockwise for half of each spin and would then rotate counterclockwise to reset itself the other 50%. Try putting 25% in there sometime. It's super wacky.
5) And transform: rotate(360deg); is the css style you're fiddling with. 

Step 2: Binding to an element

This is the part where you designate how that motion you just defined will be used. Assuming you gave your image a class of "odin", here's what step 2 would look like:

.odin {
  animation: spin 4s linear infinite;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;

Now let's break this down. *Animation* is the property, *spin* designates which keyframe rule to use. 4s says to complete the 360° spin in 4 seconds - decrease that number to make it go faster if you want. Linear means same speed from beginning to end. Infinite means you want Odin to spin forever and ever. This is the shorthand version - you can call these individually if you want, and you have other options too, like setting a delay or direction. (Here's a great breakdown of your options.)

And Bob's your uncle.

This is just one example of what you can do with CSS3 animations. Not only can you animate just about any property in a number of ways, but you can also add multiple different animations to the same element. (Like if you wanted Odin to get bigger and smaller or bounce around the screen while he's spinning, you could totally do that.)

And I return to my thesis: CSS3 Animations Are Super Rad. The end.

*The Hammer Bot started from a really fun Dash tutorial, which I then hijacked for my own sinister purposes
Sinister Porpoise
**I just tried animating a font-family change and couldn't get it to work, but that's the only limitation I've found so far. Also, I cannot imagine a time when I would actually want my font to go from Times New Roman to Comic Sans and back - although...that could be a cool practical joke.

No comments:

Post a Comment