[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.26,0:00:03.60,Default,,0000,0000,0000,,Okay, so you might be debating right now
Dialogue: 0,0:00:03.60,0:00:07.02,Default,,0000,0000,0000,,whether to use "set interval" or \N"request animation frame"
Dialogue: 0,0:00:07.02,0:00:08.76,Default,,0000,0000,0000,,for what you what to animate,
Dialogue: 0,0:00:08.76,0:00:12.86,Default,,0000,0000,0000,,but I'm going to go ahead and throw one \Nmore option in the mix.
Dialogue: 0,0:00:13.50,0:00:17.06,Default,,0000,0000,0000,,You see, in Chrome, Firefox, and IE10 Plus
Dialogue: 0,0:00:17.08,0:00:19.88,Default,,0000,0000,0000,,there's actually a way in CSS
Dialogue: 0,0:00:19.88,0:00:21.46,Default,,0000,0000,0000,,to make animations
Dialogue: 0,0:00:21.46,0:00:24.40,Default,,0000,0000,0000,,without writing any Javascript at all.
Dialogue: 0,0:00:24.71,0:00:27.70,Default,,0000,0000,0000,,Let's comment out the code we just wrote
Dialogue: 0,0:00:27.70,0:00:30.56,Default,,0000,0000,0000,,and try it for the "Oh noes" animation.
Dialogue: 0,0:00:30.58,0:00:35.77,Default,,0000,0000,0000,,Just put a big multiline comment\Naround all that.
Dialogue: 0,0:00:36.73,0:00:40.73,Default,,0000,0000,0000,,So we start by adding a "" type to\Nthe page
Dialogue: 0,0:00:40.73,0:00:44.53,Default,,0000,0000,0000,,and then adding something that looks\Nlike a CSS rule,
Dialogue: 0,0:00:44.53,0:00:48.07,Default,,0000,0000,0000,,but is actually our animation definition.
Dialogue: 0,0:00:48.07,0:00:51.37,Default,,0000,0000,0000,,So we write, "@keyframes" and then
Dialogue: 0,0:00:51.37,0:00:55.16,Default,,0000,0000,0000,,a name for animation: "getbigger,"
Dialogue: 0,0:00:55.16,0:00:57.26,Default,,0000,0000,0000,,and then curly brackets.
Dialogue: 0,0:00:57.26,0:01:01.15,Default,,0000,0000,0000,,To do a simple animation that goes from\None state to another state,
Dialogue: 0,0:01:01.15,0:01:06.50,Default,,0000,0000,0000,,We'll define 'from' and 'to' states
Dialogue: 0,0:01:07.26,0:01:10.23,Default,,0000,0000,0000,,Inside 'from,' we'll write what the\Nstarting
Dialogue: 0,0:01:10.23,0:01:11.65,Default,,0000,0000,0000,,CSS property should be.
Dialogue: 0,0:01:12.25,0:01:14.79,Default,,0000,0000,0000,,And remember how we set it to 50px
Dialogue: 0,0:01:14.79,0:01:16.31,Default,,0000,0000,0000,,at the beginning.
Dialogue: 0,0:01:16.31,0:01:18.43,Default,,0000,0000,0000,,Inside 'to,' we'll write what the
Dialogue: 0,0:01:18.43,0:01:20.76,Default,,0000,0000,0000,,end property should be.
Dialogue: 0,0:01:20.76,0:01:23.76,Default,,0000,0000,0000,,And here, maybe, it was 300px,
Dialogue: 0,0:01:23.76,0:01:26.06,Default,,0000,0000,0000,,is what we ended at. Remember?
Dialogue: 0,0:01:26.35,0:01:28.26,Default,,0000,0000,0000,,Now that we've defined an animation
Dialogue: 0,0:01:28.26,0:01:30.77,Default,,0000,0000,0000,,we need to tell the browser what element
Dialogue: 0,0:01:30.77,0:01:33.20,Default,,0000,0000,0000,,should actually use this animation.
Dialogue: 0,0:01:33.20,0:01:36.38,Default,,0000,0000,0000,,So, actually, we'll add a normal CSS rule
Dialogue: 0,0:01:36.38,0:01:37.78,Default,,0000,0000,0000,,for "Oh noes."
Dialogue: 0,0:01:38.77,0:01:42.77,Default,,0000,0000,0000,,And inside here, we specify the animation\Nname:
Dialogue: 0,0:01:43.79,0:01:46.05,Default,,0000,0000,0000,,that's "getbigger."
Dialogue: 0,0:01:47.36,0:01:51.36,Default,,0000,0000,0000,,And then animation duration: 3 seconds.
Dialogue: 0,0:01:53.06,0:01:54.86,Default,,0000,0000,0000,,Depending on what browser you're in,
Dialogue: 0,0:01:54.86,0:01:56.46,Default,,0000,0000,0000,,some of you right now be thinking
Dialogue: 0,0:01:56.46,0:01:58.80,Default,,0000,0000,0000,,"Woah! Sweet it's working!"
Dialogue: 0,0:01:58.80,0:02:01.42,Default,,0000,0000,0000,,In other browsers though, like Safari \Nor Chrome,
Dialogue: 0,0:02:01.42,0:02:03.32,Default,,0000,0000,0000,,it's probably not working.
Dialogue: 0,0:02:03.32,0:02:05.36,Default,,0000,0000,0000,,That's because there is something called
Dialogue: 0,0:02:05.36,0:02:07.14,Default,,0000,0000,0000,,"vendor prefixes."
Dialogue: 0,0:02:09.78,0:02:14.06,Default,,0000,0000,0000,,Sometimes, a browser decides to support
Dialogue: 0,0:02:14.06,0:02:16.62,Default,,0000,0000,0000,,a fancy new feature, but they put
Dialogue: 0,0:02:16.62,0:02:19.07,Default,,0000,0000,0000,,a "vendor prefix" on that feature
Dialogue: 0,0:02:19.07,0:02:21.74,Default,,0000,0000,0000,,to indicate that it might change later.
Dialogue: 0,0:02:21.74,0:02:25.74,Default,,0000,0000,0000,,This is just their browser's attempt \Nat the feature.
Dialogue: 0,0:02:25.96,0:02:29.13,Default,,0000,0000,0000,,To make this work in Chrome, \Nit's not already,
Dialogue: 0,0:02:29.13,0:02:31.39,Default,,0000,0000,0000,,we have to replicate everything we just
Dialogue: 0,0:02:31.39,0:02:33.94,Default,,0000,0000,0000,,did and stick "-webkit-" in front.
Dialogue: 0,0:02:34.79,0:02:37.03,Default,,0000,0000,0000,,So we need to replicate this part
Dialogue: 0,0:02:38.30,0:02:40.80,Default,,0000,0000,0000,,and put "-webkit-" here
Dialogue: 0,0:02:42.06,0:02:45.30,Default,,0000,0000,0000,,and then here, we'll replicate this
Dialogue: 0,0:02:45.30,0:02:49.85,Default,,0000,0000,0000,,and put "-webkit-", "-webkit-."
Dialogue: 0,0:02:49.85,0:02:52.99,Default,,0000,0000,0000,,Woah, sweet! Now it's getting bigger
Dialogue: 0,0:02:52.99,0:02:54.61,Default,,0000,0000,0000,,for every browser.
Dialogue: 0,0:02:55.46,0:02:58.06,Default,,0000,0000,0000,,Hopefully, by the time you watch this\Ntalk through,
Dialogue: 0,0:02:58.06,0:03:00.36,Default,,0000,0000,0000,,those "vendor prefixes" won't \Nbe necessary,
Dialogue: 0,0:03:00.36,0:03:02.50,Default,,0000,0000,0000,,but it's good to know that they exist
Dialogue: 0,0:03:02.50,0:03:05.82,Default,,0000,0000,0000,,because you might need to use them\Nfor some other feature one day.
Dialogue: 0,0:03:07.97,0:03:10.33,Default,,0000,0000,0000,,There's also one more way in CSS
Dialogue: 0,0:03:10.33,0:03:11.85,Default,,0000,0000,0000,,to make animations
Dialogue: 0,0:03:11.85,0:03:14.39,Default,,0000,0000,0000,,and that's with a transition property.
Dialogue: 0,0:03:14.66,0:03:16.80,Default,,0000,0000,0000,,It tells the browser how to transition
Dialogue: 0,0:03:16.80,0:03:20.33,Default,,0000,0000,0000,,smoothly from one property to the next
Dialogue: 0,0:03:20.58,0:03:23.80,Default,,0000,0000,0000,,Let's say we want the font size of the
Dialogue: 0,0:03:23.80,0:03:26.60,Default,,0000,0000,0000,,time left to get bigger
Dialogue: 0,0:03:26.60,0:03:28.45,Default,,0000,0000,0000,,when you mouse over it.
Dialogue: 0,0:03:28.45,0:03:30.39,Default,,0000,0000,0000,,We could do all that in Javascript by
Dialogue: 0,0:03:30.39,0:03:32.11,Default,,0000,0000,0000,,assigning an event listener for the
Dialogue: 0,0:03:32.11,0:03:34.11,Default,,0000,0000,0000,,mouse over event. Then using a request
Dialogue: 0,0:03:34.11,0:03:36.12,Default,,0000,0000,0000,,animation frame to increase the font size
Dialogue: 0,0:03:36.12,0:03:37.56,Default,,0000,0000,0000,,property each time.
Dialogue: 0,0:03:37.56,0:03:41.56,Default,,0000,0000,0000,,But, we can also do that entirely in CSS.
Dialogue: 0,0:03:42.05,0:03:42.86,Default,,0000,0000,0000,,Let's think.
Dialogue: 0,0:03:42.86,0:03:45.40,Default,,0000,0000,0000,,How would we normally change the font size
Dialogue: 0,0:03:45.40,0:03:48.05,Default,,0000,0000,0000,,to be bigger, when hovering, in CSS?
Dialogue: 0,0:03:48.58,0:03:50.56,Default,,0000,0000,0000,,We can do that with a hover rule.
Dialogue: 0,0:03:50.56,0:03:55.37,Default,,0000,0000,0000,,We say "#countdown:hover," and then
Dialogue: 0,0:03:55.37,0:03:59.37,Default,,0000,0000,0000,,"font-size: 150px"
Dialogue: 0,0:03:59.57,0:04:01.100,Default,,0000,0000,0000,,Okay, and now we just need to tell the
Dialogue: 0,0:04:01.100,0:04:05.100,Default,,0000,0000,0000,,browser to transition the font size \Nproperty,
Dialogue: 0,0:04:05.100,0:04:08.81,Default,,0000,0000,0000,,how much time to transition it over, and
Dialogue: 0,0:04:08.81,0:04:11.38,Default,,0000,0000,0000,,what timing function to use.
Dialogue: 0,0:04:11.55,0:04:17.34,Default,,0000,0000,0000,,So we say "transition: \Nfont-size 1s linear;".
Dialogue: 0,0:04:19.31,0:04:22.48,Default,,0000,0000,0000,,Now, you should pause the talk through and
Dialogue: 0,0:04:22.48,0:04:24.15,Default,,0000,0000,0000,,try hovering over the text
Dialogue: 0,0:04:24.15,0:04:25.74,Default,,0000,0000,0000,,to see what happens.
Dialogue: 0,0:04:25.74,0:04:28.57,Default,,0000,0000,0000,,If you're in Chrome, Firefox, or IE10 Plus
Dialogue: 0,0:04:28.57,0:04:31.25,Default,,0000,0000,0000,,then it should get bigger smoothly
Dialogue: 0,0:04:31.25,0:04:33.72,Default,,0000,0000,0000,,and you don't need any "vendor prefixes"
Dialogue: 0,0:04:33.72,0:04:35.26,Default,,0000,0000,0000,,for this technique.
Dialogue: 0,0:04:35.26,0:04:37.46,Default,,0000,0000,0000,,There is a whole lot that you can do with
Dialogue: 0,0:04:37.46,0:04:39.40,Default,,0000,0000,0000,,CSS animations and transitions
Dialogue: 0,0:04:39.40,0:04:40.94,Default,,0000,0000,0000,,and browsers are pretty good at
Dialogue: 0,0:04:40.94,0:04:43.01,Default,,0000,0000,0000,,rendering them quickly. So I encourage you
Dialogue: 0,0:04:43.01,0:04:45.48,Default,,0000,0000,0000,,to explore both of them a lot more.