WEBVTT

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

00:00:03.600 --> 00:00:07.020
whether to use "set interval" or 
"request animation frame"

00:00:07.020 --> 00:00:08.760
for what you what to animate,

00:00:08.760 --> 00:00:12.858
but I'm going to go ahead and throw one 
more option in the mix.

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

00:00:17.076 --> 00:00:19.876
there's actually a way in CSS

00:00:19.876 --> 00:00:21.456
to make animations

00:00:21.456 --> 00:00:24.403
without writing any Javascript at all.

00:00:24.713 --> 00:00:27.700
Let's comment out the code we just wrote

00:00:27.700 --> 00:00:30.560
and try it for the "Oh noes" animation.

00:00:30.582 --> 00:00:35.772
Just put a big multiline comment
around all that.

00:00:36.732 --> 00:00:40.732
So we start by adding a "" type to
the page

00:00:40.732 --> 00:00:44.532
and then adding something that looks
like a CSS rule,

00:00:44.532 --> 00:00:48.072
but is actually our animation definition.

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

00:00:51.373 --> 00:00:55.163
a name for animation: "getbigger,"

00:00:55.163 --> 00:00:57.263
and then curly brackets.

00:00:57.263 --> 00:01:01.153
To do a simple animation that goes from
one state to another state,

00:01:01.153 --> 00:01:06.503
We'll define 'from' and 'to' states

00:01:07.255 --> 00:01:10.228
Inside 'from,' we'll write what the
starting

00:01:10.228 --> 00:01:11.648
CSS property should be.

00:01:12.248 --> 00:01:14.788
And remember how we set it to 50px

00:01:14.788 --> 00:01:16.308
at the beginning.

00:01:16.308 --> 00:01:18.428
Inside 'to,' we'll write what the

00:01:18.428 --> 00:01:20.758
end property should be.

00:01:20.758 --> 00:01:23.758
And here, maybe, it was 300px,

00:01:23.758 --> 00:01:26.058
is what we ended at. Remember?

00:01:26.350 --> 00:01:28.260
Now that we've defined an animation

00:01:28.260 --> 00:01:30.770
we need to tell the browser what element

00:01:30.770 --> 00:01:33.200
should actually use this animation.

00:01:33.200 --> 00:01:36.380
So, actually, we'll add a normal CSS rule

00:01:36.380 --> 00:01:37.780
for "Oh noes."

00:01:38.772 --> 00:01:42.772
And inside here, we specify the animation
name:

00:01:43.792 --> 00:01:46.052
that's "getbigger."

00:01:47.355 --> 00:01:51.355
And then animation duration: 3 seconds.

00:01:53.058 --> 00:01:54.858
Depending on what browser you're in,

00:01:54.858 --> 00:01:56.458
some of you right now be thinking

00:01:56.458 --> 00:01:58.798
"Woah! Sweet it's working!"

00:01:58.798 --> 00:02:01.418
In other browsers though, like Safari 
or Chrome,

00:02:01.418 --> 00:02:03.318
it's probably not working.

00:02:03.318 --> 00:02:05.358
That's because there is something called

00:02:05.358 --> 00:02:07.138
"vendor prefixes."

00:02:09.785 --> 00:02:14.065
Sometimes, a browser decides to support

00:02:14.065 --> 00:02:16.621
a fancy new feature, but they put

00:02:16.621 --> 00:02:19.071
a "vendor prefix" on that feature

00:02:19.071 --> 00:02:21.741
to indicate that it might change later.

00:02:21.741 --> 00:02:25.741
This is just their browser's attempt 
at the feature.

00:02:25.957 --> 00:02:29.127
To make this work in Chrome, 
it's not already,

00:02:29.127 --> 00:02:31.387
we have to replicate everything we just

00:02:31.387 --> 00:02:33.937
did and stick "-webkit-" in front.

00:02:34.793 --> 00:02:37.033
So we need to replicate this part

00:02:38.299 --> 00:02:40.799
and put "-webkit-" here

00:02:42.060 --> 00:02:45.300
and then here, we'll replicate this

00:02:45.300 --> 00:02:49.850
and put "-webkit-", "-webkit-."

00:02:49.850 --> 00:02:52.990
Woah, sweet! Now it's getting bigger

00:02:52.990 --> 00:02:54.610
for every browser.

00:02:55.460 --> 00:02:58.060
Hopefully, by the time you watch this
talk through,

00:02:58.060 --> 00:03:00.360
those "vendor prefixes" won't 
be necessary,

00:03:00.360 --> 00:03:02.500
but it's good to know that they exist

00:03:02.500 --> 00:03:05.820
because you might need to use them
for some other feature one day.

00:03:07.968 --> 00:03:10.328
There's also one more way in CSS

00:03:10.328 --> 00:03:11.848
to make animations

00:03:11.848 --> 00:03:14.388
and that's with a transition property.

00:03:14.658 --> 00:03:16.798
It tells the browser how to transition

00:03:16.798 --> 00:03:20.328
smoothly from one property to the next

00:03:20.582 --> 00:03:23.802
Let's say we want the font size of the

00:03:23.802 --> 00:03:26.602
time left to get bigger

00:03:26.602 --> 00:03:28.452
when you mouse over it.

00:03:28.452 --> 00:03:30.392
We could do all that in Javascript by

00:03:30.392 --> 00:03:32.112
assigning an event listener for the

00:03:32.112 --> 00:03:34.112
mouse over event. Then using a request

00:03:34.112 --> 00:03:36.122
animation frame to increase the font size

00:03:36.122 --> 00:03:37.562
property each time.

00:03:37.562 --> 00:03:41.562
But, we can also do that entirely in CSS.

00:03:42.052 --> 00:03:42.862
Let's think.

00:03:42.862 --> 00:03:45.402
How would we normally change the font size

00:03:45.402 --> 00:03:48.052
to be bigger, when hovering, in CSS?

00:03:48.580 --> 00:03:50.560
We can do that with a hover rule.

00:03:50.560 --> 00:03:55.370
We say "#countdown:hover," and then

00:03:55.370 --> 00:03:59.370
"font-size: 150px"

00:03:59.566 --> 00:04:01.996
Okay, and now we just need to tell the

00:04:01.996 --> 00:04:05.996
browser to transition the font size 
property,

00:04:05.996 --> 00:04:08.806
how much time to transition it over, and

00:04:08.806 --> 00:04:11.376
what timing function to use.

00:04:11.550 --> 00:04:17.340
So we say "transition: 
font-size 1s linear;".

00:04:19.314 --> 00:04:22.484
Now, you should pause the talk through and

00:04:22.484 --> 00:04:24.154
try hovering over the text

00:04:24.154 --> 00:04:25.744
to see what happens.

00:04:25.744 --> 00:04:28.574
If you're in Chrome, Firefox, or IE10 Plus

00:04:28.574 --> 00:04:31.254
then it should get bigger smoothly

00:04:31.254 --> 00:04:33.724
and you don't need any "vendor prefixes"

00:04:33.724 --> 00:04:35.264
for this technique.

00:04:35.264 --> 00:04:37.464
There is a whole lot that you can do with

00:04:37.464 --> 00:04:39.404
CSS animations and transitions

00:04:39.404 --> 00:04:40.944
and browsers are pretty good at

00:04:40.944 --> 00:04:43.011
rendering them quickly. So I encourage you

00:04:43.011 --> 00:04:45.481
to explore both of them a lot more.