1
00:00:00,260 --> 00:00:03,600
Okay, so you might be debating right now

2
00:00:03,600 --> 00:00:07,020
whether to use "set interval" or 
"request animation frame"

3
00:00:07,020 --> 00:00:08,760
for what you what to animate,

4
00:00:08,760 --> 00:00:12,858
but I'm going to go ahead and throw one 
more option in the mix.

5
00:00:13,499 --> 00:00:17,059
You see, in Chrome, Firefox, and IE10 Plus

6
00:00:17,076 --> 00:00:19,876
there's actually a way in CSS

7
00:00:19,876 --> 00:00:21,456
to make animations

8
00:00:21,456 --> 00:00:24,403
without writing any Javascript at all.

9
00:00:24,713 --> 00:00:27,700
Let's comment out the code we just wrote

10
00:00:27,700 --> 00:00:30,560
and try it for the "Oh noes" animation.

11
00:00:30,582 --> 00:00:35,772
Just put a big multiline comment
around all that.

12
00:00:36,732 --> 00:00:40,732
So we start by adding a "" type to
the page

13
00:00:40,732 --> 00:00:44,532
and then adding something that looks
like a CSS rule,

14
00:00:44,532 --> 00:00:48,072
but is actually our animation definition.

15
00:00:48,073 --> 00:00:51,373
So we write, "@keyframes" and then

16
00:00:51,373 --> 00:00:55,163
a name for animation: "getbigger,"

17
00:00:55,163 --> 00:00:57,263
and then curly brackets.

18
00:00:57,263 --> 00:01:01,153
To do a simple animation that goes from
one state to another state,

19
00:01:01,153 --> 00:01:06,503
We'll define 'from' and 'to' states

20
00:01:07,255 --> 00:01:10,228
Inside 'from,' we'll write what the
starting

21
00:01:10,228 --> 00:01:11,648
CSS property should be.

22
00:01:12,248 --> 00:01:14,788
And remember how we set it to 50px

23
00:01:14,788 --> 00:01:16,308
at the beginning.

24
00:01:16,308 --> 00:01:18,428
Inside 'to,' we'll write what the

25
00:01:18,428 --> 00:01:20,758
end property should be.

26
00:01:20,758 --> 00:01:23,758
And here, maybe, it was 300px,

27
00:01:23,758 --> 00:01:26,058
is what we ended at. Remember?

28
00:01:26,350 --> 00:01:28,260
Now that we've defined an animation

29
00:01:28,260 --> 00:01:30,770
we need to tell the browser what element

30
00:01:30,770 --> 00:01:33,200
should actually use this animation.

31
00:01:33,200 --> 00:01:36,380
So, actually, we'll add a normal CSS rule

32
00:01:36,380 --> 00:01:37,780
for "Oh noes."

33
00:01:38,772 --> 00:01:42,772
And inside here, we specify the animation
name:

34
00:01:43,792 --> 00:01:46,052
that's "getbigger."

35
00:01:47,355 --> 00:01:51,355
And then animation duration: 3 seconds.

36
00:01:53,058 --> 00:01:54,858
Depending on what browser you're in,

37
00:01:54,858 --> 00:01:56,458
some of you right now be thinking

38
00:01:56,458 --> 00:01:58,798
"Woah! Sweet it's working!"

39
00:01:58,798 --> 00:02:01,418
In other browsers though, like Safari 
or Chrome,

40
00:02:01,418 --> 00:02:03,318
it's probably not working.

41
00:02:03,318 --> 00:02:05,358
That's because there is something called

42
00:02:05,358 --> 00:02:07,138
"vendor prefixes."

43
00:02:09,785 --> 00:02:14,065
Sometimes, a browser decides to support

44
00:02:14,065 --> 00:02:16,621
a fancy new feature, but they put

45
00:02:16,621 --> 00:02:19,071
a "vendor prefix" on that feature

46
00:02:19,071 --> 00:02:21,741
to indicate that it might change later.

47
00:02:21,741 --> 00:02:25,741
This is just their browser's attempt 
at the feature.

48
00:02:25,957 --> 00:02:29,127
To make this work in Chrome, 
it's not already,

49
00:02:29,127 --> 00:02:31,387
we have to replicate everything we just

50
00:02:31,387 --> 00:02:33,937
did and stick "-webkit-" in front.

51
00:02:34,793 --> 00:02:37,033
So we need to replicate this part

52
00:02:38,299 --> 00:02:40,799
and put "-webkit-" here

53
00:02:42,060 --> 00:02:45,300
and then here, we'll replicate this

54
00:02:45,300 --> 00:02:49,850
and put "-webkit-", "-webkit-."

55
00:02:49,850 --> 00:02:52,990
Woah, sweet! Now it's getting bigger

56
00:02:52,990 --> 00:02:54,610
for every browser.

57
00:02:55,460 --> 00:02:58,060
Hopefully, by the time you watch this
talk through,

58
00:02:58,060 --> 00:03:00,360
those "vendor prefixes" won't 
be necessary,

59
00:03:00,360 --> 00:03:02,500
but it's good to know that they exist

60
00:03:02,500 --> 00:03:05,820
because you might need to use them
for some other feature one day.

61
00:03:07,968 --> 00:03:10,328
There's also one more way in CSS

62
00:03:10,328 --> 00:03:11,848
to make animations

63
00:03:11,848 --> 00:03:14,388
and that's with a transition property.

64
00:03:14,658 --> 00:03:16,798
It tells the browser how to transition

65
00:03:16,798 --> 00:03:20,328
smoothly from one property to the next

66
00:03:20,582 --> 00:03:23,802
Let's say we want the font size of the

67
00:03:23,802 --> 00:03:26,602
time left to get bigger

68
00:03:26,602 --> 00:03:28,452
when you mouse over it.

69
00:03:28,452 --> 00:03:30,392
We could do all that in Javascript by

70
00:03:30,392 --> 00:03:32,112
assigning an event listener for the

71
00:03:32,112 --> 00:03:34,112
mouse over event. Then using a request

72
00:03:34,112 --> 00:03:36,122
animation frame to increase the font size

73
00:03:36,122 --> 00:03:37,562
property each time.

74
00:03:37,562 --> 00:03:41,562
But, we can also do that entirely in CSS.

75
00:03:42,052 --> 00:03:42,862
Let's think.

76
00:03:42,862 --> 00:03:45,402
How would we normally change the font size

77
00:03:45,402 --> 00:03:48,052
to be bigger, when hovering, in CSS?

78
00:03:48,580 --> 00:03:50,560
We can do that with a hover rule.

79
00:03:50,560 --> 00:03:55,370
We say "#countdown:hover," and then

80
00:03:55,370 --> 00:03:59,370
"font-size: 150px"

81
00:03:59,566 --> 00:04:01,996
Okay, and now we just need to tell the

82
00:04:01,996 --> 00:04:05,996
browser to transition the font size 
property,

83
00:04:05,996 --> 00:04:08,806
how much time to transition it over, and

84
00:04:08,806 --> 00:04:11,376
what timing function to use.

85
00:04:11,550 --> 00:04:17,340
So we say "transition: 
font-size 1s linear;".

86
00:04:19,314 --> 00:04:22,484
Now, you should pause the talk through and

87
00:04:22,484 --> 00:04:24,154
try hovering over the text

88
00:04:24,154 --> 00:04:25,744
to see what happens.

89
00:04:25,744 --> 00:04:28,574
If you're in Chrome, Firefox, or IE10 Plus

90
00:04:28,574 --> 00:04:31,254
then it should get bigger smoothly

91
00:04:31,254 --> 00:04:33,724
and you don't need any "vendor prefixes"

92
00:04:33,724 --> 00:04:35,264
for this technique.

93
00:04:35,264 --> 00:04:37,464
There is a whole lot that you can do with

94
00:04:37,464 --> 00:04:39,404
CSS animations and transitions

95
00:04:39,404 --> 00:04:40,944
and browsers are pretty good at

96
00:04:40,944 --> 00:04:43,011
rendering them quickly. So I encourage you

97
00:04:43,011 --> 00:04:45,481
to explore both of them a lot more.