Animating styles with CSS animations (Video Version)

Okay, so you might be debating right now

whether to use "set interval" or
"request animation frame"

for what you what to animate,

but I'm going to go ahead and throw one
more option in the mix.

You see, in Chrome, Firefox, and IE10 Plus

there's actually a way in CSS

to make animations

without writing any Javascript at all.

Let's comment out the code we just wrote

and try it for the "Oh noes" animation.

Just put a big multiline comment
around all that.

So we start by adding a "" type to
the page

and then adding something that looks
like a CSS rule,

but is actually our animation definition.

So we write, "@keyframes" and then

a name for animation: "getbigger,"

and then curly brackets.

To do a simple animation that goes from
one state to another state,

We'll define 'from' and 'to' states

Inside 'from,' we'll write what the
starting

CSS property should be.

And remember how we set it to 50px

at the beginning.

Inside 'to,' we'll write what the

end property should be.

And here, maybe, it was 300px,

is what we ended at. Remember?

Now that we've defined an animation

we need to tell the browser what element

should actually use this animation.

So, actually, we'll add a normal CSS rule

for "Oh noes."

And inside here, we specify the animation
name:

that's "getbigger."

And then animation duration: 3 seconds.

Depending on what browser you're in,

some of you right now be thinking

"Woah! Sweet it's working!"

In other browsers though, like Safari
or Chrome,

it's probably not working.

That's because there is something called

"vendor prefixes."

Sometimes, a browser decides to support

a fancy new feature, but they put

a "vendor prefix" on that feature

to indicate that it might change later.

This is just their browser's attempt
at the feature.

To make this work in Chrome,
it's not already,

we have to replicate everything we just

did and stick "-webkit-" in front.

So we need to replicate this part

and put "-webkit-" here

and then here, we'll replicate this

and put "-webkit-", "-webkit-."

Woah, sweet! Now it's getting bigger

for every browser.

Hopefully, by the time you watch this
talk through,

those "vendor prefixes" won't
be necessary,

but it's good to know that they exist

because you might need to use them
for some other feature one day.

There's also one more way in CSS

to make animations

and that's with a transition property.

It tells the browser how to transition

smoothly from one property to the next

Let's say we want the font size of the

time left to get bigger

when you mouse over it.

We could do all that in Javascript by

assigning an event listener for the

mouse over event. Then using a request

animation frame to increase the font size

property each time.

But, we can also do that entirely in CSS.

Let's think.

How would we normally change the font size

to be bigger, when hovering, in CSS?

We can do that with a hover rule.

We say "#countdown:hover," and then

"font-size: 150px"

Okay, and now we just need to tell the

browser to transition the font size
property,

how much time to transition it over, and

what timing function to use.

So we say "transition:
font-size 1s linear;".

Now, you should pause the talk through and

try hovering over the text

to see what happens.

If you're in Chrome, Firefox, or IE10 Plus

then it should get bigger smoothly

and you don't need any "vendor prefixes"

for this technique.

There is a whole lot that you can do with

CSS animations and transitions

and browsers are pretty good at

rendering them quickly. So I encourage you

to explore both of them a lot more.