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.