0:00:00.260,0:00:03.600
Okay, so you might be debating right now

0:00:03.600,0:00:07.020
whether to use "set interval" or [br]"request animation frame"

0:00:07.020,0:00:08.760
for what you what to animate,

0:00:08.760,0:00:12.858
but I'm going to go ahead and throw one [br]more option in the mix.

0:00:13.499,0:00:17.059
You see, in Chrome, Firefox, and IE10 Plus

0:00:17.076,0:00:19.876
there's actually a way in CSS

0:00:19.876,0:00:21.456
to make animations

0:00:21.456,0:00:24.403
without writing any Javascript at all.

0:00:24.713,0:00:27.700
Let's comment out the code we just wrote

0:00:27.700,0:00:30.560
and try it for the "Oh noes" animation.

0:00:30.582,0:00:35.772
Just put a big multiline comment[br]around all that.

0:00:36.732,0:00:40.732
So we start by adding a "" type to[br]the page

0:00:40.732,0:00:44.532
and then adding something that looks[br]like a CSS rule,

0:00:44.532,0:00:48.072
but is actually our animation definition.

0:00:48.073,0:00:51.373
So we write, "@keyframes" and then

0:00:51.373,0:00:55.163
a name for animation: "getbigger,"

0:00:55.163,0:00:57.263
and then curly brackets.

0:00:57.263,0:01:01.153
To do a simple animation that goes from[br]one state to another state,

0:01:01.153,0:01:06.503
We'll define 'from' and 'to' states

0:01:07.255,0:01:10.228
Inside 'from,' we'll write what the[br]starting

0:01:10.228,0:01:11.648
CSS property should be.

0:01:12.248,0:01:14.788
And remember how we set it to 50px

0:01:14.788,0:01:16.308
at the beginning.

0:01:16.308,0:01:18.428
Inside 'to,' we'll write what the

0:01:18.428,0:01:20.758
end property should be.

0:01:20.758,0:01:23.758
And here, maybe, it was 300px,

0:01:23.758,0:01:26.058
is what we ended at. Remember?

0:01:26.350,0:01:28.260
Now that we've defined an animation

0:01:28.260,0:01:30.770
we need to tell the browser what element

0:01:30.770,0:01:33.200
should actually use this animation.

0:01:33.200,0:01:36.380
So, actually, we'll add a normal CSS rule

0:01:36.380,0:01:37.780
for "Oh noes."

0:01:38.772,0:01:42.772
And inside here, we specify the animation[br]name:

0:01:43.792,0:01:46.052
that's "getbigger."

0:01:47.355,0:01:51.355
And then animation duration: 3 seconds.

0:01:53.058,0:01:54.858
Depending on what browser you're in,

0:01:54.858,0:01:56.458
some of you right now be thinking

0:01:56.458,0:01:58.798
"Woah! Sweet it's working!"

0:01:58.798,0:02:01.418
In other browsers though, like Safari [br]or Chrome,

0:02:01.418,0:02:03.318
it's probably not working.

0:02:03.318,0:02:05.358
That's because there is something called

0:02:05.358,0:02:07.138
"vendor prefixes."

0:02:09.785,0:02:14.065
Sometimes, a browser decides to support

0:02:14.065,0:02:16.621
a fancy new feature, but they put

0:02:16.621,0:02:19.071
a "vendor prefix" on that feature

0:02:19.071,0:02:21.741
to indicate that it might change later.

0:02:21.741,0:02:25.741
This is just their browser's attempt [br]at the feature.

0:02:25.957,0:02:29.127
To make this work in Chrome, [br]it's not already,

0:02:29.127,0:02:31.387
we have to replicate everything we just

0:02:31.387,0:02:33.937
did and stick "-webkit-" in front.

0:02:34.793,0:02:37.033
So we need to replicate this part

0:02:38.299,0:02:40.799
and put "-webkit-" here

0:02:42.060,0:02:45.300
and then here, we'll replicate this

0:02:45.300,0:02:49.850
and put "-webkit-", "-webkit-."

0:02:49.850,0:02:52.990
Woah, sweet! Now it's getting bigger

0:02:52.990,0:02:54.610
for every browser.

0:02:55.460,0:02:58.060
Hopefully, by the time you watch this[br]talk through,

0:02:58.060,0:03:00.360
those "vendor prefixes" won't [br]be necessary,

0:03:00.360,0:03:02.500
but it's good to know that they exist

0:03:02.500,0:03:05.820
because you might need to use them[br]for some other feature one day.

0:03:07.968,0:03:10.328
There's also one more way in CSS

0:03:10.328,0:03:11.848
to make animations

0:03:11.848,0:03:14.388
and that's with a transition property.

0:03:14.658,0:03:16.798
It tells the browser how to transition

0:03:16.798,0:03:20.328
smoothly from one property to the next

0:03:20.582,0:03:23.802
Let's say we want the font size of the

0:03:23.802,0:03:26.602
time left to get bigger

0:03:26.602,0:03:28.452
when you mouse over it.

0:03:28.452,0:03:30.392
We could do all that in Javascript by

0:03:30.392,0:03:32.112
assigning an event listener for the

0:03:32.112,0:03:34.112
mouse over event. Then using a request

0:03:34.112,0:03:36.122
animation frame to increase the font size

0:03:36.122,0:03:37.562
property each time.

0:03:37.562,0:03:41.562
But, we can also do that entirely in CSS.

0:03:42.052,0:03:42.862
Let's think.

0:03:42.862,0:03:45.402
How would we normally change the font size

0:03:45.402,0:03:48.052
to be bigger, when hovering, in CSS?

0:03:48.580,0:03:50.560
We can do that with a hover rule.

0:03:50.560,0:03:55.370
We say "#countdown:hover," and then

0:03:55.370,0:03:59.370
"font-size: 150px"

0:03:59.566,0:04:01.996
Okay, and now we just need to tell the

0:04:01.996,0:04:05.996
browser to transition the font size [br]property,

0:04:05.996,0:04:08.806
how much time to transition it over, and

0:04:08.806,0:04:11.376
what timing function to use.

0:04:11.550,0:04:17.340
So we say "transition: [br]font-size 1s linear;".

0:04:19.314,0:04:22.484
Now, you should pause the talk through and

0:04:22.484,0:04:24.154
try hovering over the text

0:04:24.154,0:04:25.744
to see what happens.

0:04:25.744,0:04:28.574
If you're in Chrome, Firefox, or IE10 Plus

0:04:28.574,0:04:31.254
then it should get bigger smoothly

0:04:31.254,0:04:33.724
and you don't need any "vendor prefixes"

0:04:33.724,0:04:35.264
for this technique.

0:04:35.264,0:04:37.464
There is a whole lot that you can do with

0:04:37.464,0:04:39.404
CSS animations and transitions

0:04:39.404,0:04:40.944
and browsers are pretty good at

0:04:40.944,0:04:43.011
rendering them quickly. So I encourage you

0:04:43.011,0:04:45.481
to explore both of them a lot more.