IntroductionWelcome| 00:03 | Hello, I am Val Head, Designer and Consultant.
I want to welcome you to CSS: Animations.
| | 00:10 | I'll show you some of the things you can
do with CSS animations and what they're best
| | 00:13 | at now and into the near future.
| | 00:15 | We'll start with a solid foundation
of the syntax of CSS animations.
| | 00:20 | We'll build a sample project to see some of
it in practice and cover lots of advice for
| | 00:24 | how you can take advantage of
animations in your own work.
| | 00:27 | We will finish things off with a discussion
of Browser Support and helpful tools you can
| | 00:31 | use to be more productive creating animations.
| | 00:34 | I'm really excited about the options that CSS
animations open up for us, and I hope you are too.
| | 00:39 | So let's get started.
| | Collapse this transcript |
| What you should know before watching this course| 00:00 | I make a few assumptions of what you
already know for the material in this course.
| | 00:03 | So let's take a minute to
make sure we're on the same page.
| | 00:07 | animations are a fun new addition to CSS, but they're
probably not the best place to start learning CSS.
| | 00:12 | You want a basic working knowledge of
HTML and CSS coming into this course.
| | 00:17 | This course will focus on the syntax and use
of animation related properties, but we won't
| | 00:21 | be covering the underlying CSS and
HTML in the examples in great detail.
| | 00:25 | I also assume that you are somewhat
familiar with newer CSS properties like transform.
| | 00:30 | But don't worry if you haven't used it extensively, you
don't need to be a CSS transforms expert by any stretch.
| | 00:36 | If you're new to web design or don't feel
you have enough background knowledge of HTML
| | 00:40 | and CSS, you might want to check out some
of the more introductory lynda.com courses,
| | 00:45 | like CSS Fundamentals, CSS: Page Layouts,
or HTML Essential Training.
| | 00:51 | These courses have been created especially
for new web designers and will give you a
| | 00:54 | great foundation to start this
course on, if you don't have it already.
| | Collapse this transcript |
| Vendor prefixes and browser support| 00:00 | You'll be seeing a lot of vendor
prefixes in the exercises for this course.
| | 00:04 | So let's take a minute to talk about what
they're for and how I'll be using them in this course.
| | 00:09 | Vendor prefixes are a way for browsers
to support features before the spec
| | 00:13 | for that feature has been finalized.
| | 00:14 | Sometimes the early implementation of a
feature is different from the final version,
| | 00:19 | or the feature is only partially implemented early on.
| | 00:22 | Prefixes are a way to let us know that
features may not be 100% complete yet.
| | 00:26 | They're also there to help us work around
any slight differences in implementation from
| | 00:29 | one browser to another while
the feature is being finalized.
| | 00:33 | Vendor prefixes are often
hotly debated in the industry.
| | 00:36 | Love them or hate them, they are a necessary evil of authoring
quality CSS that will work across multiple browsers.
| | 00:41 | At the time of this recording, the most
recent versions of Firefox, Opera, and IE support
| | 00:46 | CSS animations without prefixes.
| | 00:49 | However, slightly older versions of these
browsers, even ones from just a few months ago,
| | 00:53 | still require prefixes for animation support.
| | 00:56 | In all of the examples, you'll see me starting
out with only the WebKit version of the animation
| | 01:01 | properties while I'm working on
things and getting them where I want them.
| | 01:04 | By the final version I will always
include all of my vendor prefixes.
| | 01:07 | I'll write out the prefixes in the same
order each time starting with the WebKit prefix
| | 01:11 | version for WebKit browsers, then the moz prefix for Mozilla,
the O for Opera, and finally the unprefixed property.
| | 01:19 | The unprefixed property should always be
included last so that their final implementation will
| | 01:23 | override any experimental implementation.
| | 01:26 | Thanks to the cascading nature of CSS, the
last interpretable property listed will be
| | 01:30 | the one used by the browser.
| | 01:32 | All these prefixes certainly look like a
lot to type. To help you with that, especially
| | 01:36 | if you're writing the note by hand, I've included a snippet
text file along with the exercise files for this course.
| | 01:42 | Each animation property you'll use will need to be
prefixed. Your keyframe rules also need to be prefixed.
| | 01:47 | So you'll end up with a long
list of keyframe rules like this.
| | 01:50 | Your unprefixed rules should always come
last to keep your code nicely future-proof.
| | 01:54 | As each browser vendor finalizes its implementation of the
animation spec, they will move towards supporting the unprefixed version.
| | 02:00 | I'll also be using some other newer CSS properties
like transforms, and these will also require prefixes.
| | 02:06 | So get ready to see a whole lot of prefixes,
but don't worry, I promise to make things fun.
| | Collapse this transcript |
| Using the exercise files| 00:00 | The exercise files for this course are available
for both premium and regular members of lynda.com.
| | 00:06 | You can take just about any of the techniques covered in
this course and apply them to your own work right away.
| | 00:11 | You might also find it helpful to follow
along with the specific exercise files.
| | 00:15 | To access the files, go to the Exercise Files area,
and look for the zip file to download,
| | 00:20 | then extract the folder somewhere easy to
find, maybe on your desktop or Documents folder.
| | 00:25 | The exercise files are organized by chapter
and within each chapter there are sub-folders
| | 00:29 | each named for the tutorial it corresponds to.
| | 00:32 | Each tutorial's folder contains all the
assets you will need to follow along throughout
| | 00:36 | the tutorial, as well as the final folder with
the fully completed version of the tutorial.
| | 00:41 | You can use whichever you
prefer to follow along with.
| | 00:44 | To keep things easy to follow on screen, I'll be showing
all the tutorial examples using the WebKit prefix only.
| | 00:50 | However, all the exercise files will have the
complete list of necessary prefixes currently
| | 00:54 | required by browser
vendors in the final version.
| | Collapse this transcript |
|
|
1. Understanding CSS AnimationsAnimation basics| 00:00 | To get started, let's take a look at the basic
ingredients we need to create an animation in CSS.
| | 00:05 | We'll create a simple animation of a unicycle
rider riding across the screen to demonstrate
| | 00:10 | the main components of a CSS animation.
| | 00:12 | So we'll be creating an animation
that will look a little like this.
| | 00:16 | If we move over to Coda, we can take a
look at the HTML behind this example.
| | 00:20 | Coda is the text editor I'll be using for
all the examples throughout this course.
| | 00:23 | You can use any text editor you prefer,
they will all do pretty much the much the same
| | 00:26 | thing, but I like to use Coda, because it
has a lot of code hinting and other tricks
| | 00:30 | that help me get things done quickly.
| | 00:31 | So the HTML behind this
example is pretty simple.
| | 00:35 | We have a div with a class wrapper and
then our unicycle rider image within that div.
| | 00:39 | If we move over to look at our CSS file,
we also have some basic styles in place.
| | 00:44 | We have some positioning applied to our
image to make sure it starts where we want it to,
| | 00:47 | and a few margins and such to keep
things away from the very edges of the page.
| | 00:51 | Really not a whole lot yet.
So let's get started to adding some animation.
| | 00:55 | There are two main parts to any CSS animation.
| | 00:58 | The first is defining the animation and the
second is assigning it to the HTML element
| | 01:02 | or elements that we'll be using in.
| | 01:05 | You can do this in any order, but I prefer to
define the animation first and then assign it.
| | 01:09 | To me that just makes more sense,
but the order doesn't really matter.
| | 01:13 | We'll start our CSS animation by defining
its keyframes using the @-keyframes rule.
| | 01:19 | Keyframes are essentially a list describing what
should happen over the course of the animation.
| | 01:22 | We'll define the values for the properties that we'll
be animating at various points during the animation.
| | 01:27 | Any property that we want to have changed
over the course of one cycle of the animation
| | 01:31 | needs to be listed in our keyframes.
| | 01:33 | So let's take a look at how
we write out these keyframes.
| | 01:35 | We'll go back to our CSS file, and we
will start by writing our keyframes block.
| | 01:40 | And our keyframes block works very similar
to any other CSS rule or anything within the
| | 01:46 | curly brackets is what's
considered part of that block.
| | 01:49 | To complete this @-keyframes block, we
also need to give our animation a name.
| | 01:53 | I'm going to call these animation rides,
since we have a man riding in unicycle.
| | 01:57 | That seems to make sense.
| | 01:58 | There are few options available to us for how we
can define each keyframe within our @-keyframe block.
| | 02:03 | My personal favorite for animations that are
going to move from one place to another, like
| | 02:07 | the one we're creating here
are the keyframes of from and to.
| | 02:11 | And these work just like they sound.
| | 02:13 | You define where to animate
from and where to animate to.
| | 02:17 | It's really easy to remember and
exactly what we want to do here.
| | 02:20 | So for this animation, we'll be moving our
unicycle rider from its current position so
| | 02:24 | we'll start out with a translation of zero,
which essentially means we are changing nothing
| | 02:30 | and starting him exactly from where he is
right now and then we will animate him to
| | 02:34 | a position that is 400 pixels further to
the right to get him across the screen.
| | 02:39 | So now our to keyframe will translate our
unicycle rider 400 pixels over to the right.
| | 02:46 | So by translating 400 pixels on the X axis,
we'll be moving to the right by 400 pixels.
| | 02:51 | This is essentially the same as if we had
assigned a new left position of 420 pixels
| | 02:56 | to our unicycle rider, because you'll see
he started at the left position of 20,
| | 03:00 | and then we're moving him 400 pixels to the right.
| | 03:02 | But generally using translate to move things
around, as opposed to animating the left and
| | 03:06 | top properties is considered
to get you better performance.
| | 03:09 | A lot of community developers have detailed
how transforms can take advantage of things
| | 03:13 | like sub-pixel rendering and hardware
acceleration where top and left cannot.
| | 03:18 | So it's a good idea to stick with
translate to move things around.
| | 03:21 | There's also little chance you would ever use
translate to position an element while laying out a page.
| | 03:26 | So using translate instead of top and left
in our animations means there's less chance
| | 03:30 | we'll accidentally override existing styles.
| | 03:32 | So now that we have our animation defined,
the next step is to assign this animation
| | 03:36 | to one of our HTML elements.
| | 03:38 | We're going to assign this animation to our image of
our unicycle rider which we know has the class of cycle.
| | 03:44 | So we'll go up here into this
class and add a few more properties.
| | 03:47 | The first additional property we're
going to add is the animation name.
| | 03:51 | In the animation name we're going to assign
it is ride, since that's where we just spent
| | 03:55 | all the time making keyframes for.
| | 03:57 | This rule tells our image
which set of keyframes to take on.
| | 04:00 | The second property we want
to add is animation duration.
| | 04:04 | Our keyframes have defined what will change
over the course of our animation, but there's
| | 04:07 | no indication of how long this will take
until we define this animation duration property.
| | 04:12 | I'm going to set it to 2 seconds to have
our unicycle rider kind of moving at a--
| | 04:16 | I guess a relaxed unicycle pace.
| | 04:18 | If we preview our files right now,
you'll see we have some animation happening.
| | 04:22 | So let's save our CSS and go back over to
our browser and see what's happening so far.
| | 04:26 | So if we refresh our page, we can see our
animations starts happening as soon as we refresh.
| | 04:31 | Just like our keyframes are still there, our
unicycle rider image moves across the screen
| | 04:34 | to the right by 400 pixels,
and it does it nice and smoothly.
| | 04:38 | We've just set the minimum
needed to create a CSS animation.
| | 04:41 | However, there are two other properties I
prefer to define explicitly for all my animations,
| | 04:46 | because it makes my code easier to follow.
| | 04:48 | So let's go back to our CSS in Coda and just
add a couple more properties to our cycle class.
| | 04:53 | The first is the animation timing function.
| | 04:56 | This property has a default value if you
don't set one explicitly, but I prefer to set this
| | 05:00 | property for all my animations because it
has such an impact on the feel of the animation.
| | 05:04 | We'll discuss this in more detail in later
tutorials, but for now I'm going to set our
| | 05:08 | unicycle rider's timing function to ease-in.
| | 05:13 | This will have our unicycle rider starting
at slow and then speed up as he gets closer
| | 05:16 | to the end of his movement.
| | 05:17 | That will make it look like he's just kind
of maybe pedaling a little harder near the
| | 05:21 | end or something like that.
| | 05:23 | The second property I like to always
include is the animation iteration count.
| | 05:28 | The animation iteration count determines
how many times your animation will play.
| | 05:32 | As we've just seen, if you
don't define this the default is 1.
| | 05:34 | And that's really how many times I
would like this to play right now.
| | 05:37 | So I'm going to set it to 1, even
though that's also the default.
| | 05:40 | But I like to type that explicitly so it's
easier to look at my code and see how many
| | 05:43 | times my animation is repeating.
If I leave it out, I find it harder to remember.
| | 05:47 | So now that we've added those few properties,
let's save our CSS and go back and preview
| | 05:51 | our animation one last time.
| | 05:52 | So if we refresh the page, you'll see our
unicycle rider starts out slow and then speeds
| | 05:57 | up at the end, which is reflecting
our ease-in animation timing function.
| | 06:01 | So now that we have the animation looking how we like it,
let's go back to Coda and add one last thing.
| | 06:05 | We're going to need to add in all our vendor prefixes
so this animation will play in non-WebKit browsers too.
| | 06:11 | Okay, so now that we have all our vendor prefixes
in place, we'll be able to preview this animation
| | 06:16 | in a non-WebKit browser that
supports animation as well.
| | 06:19 | Now we have the basics in
place for our first CSS animation.
| | 06:23 | Our unicycle rider moves across the
screen smoothly and just how we expected.
| | 06:26 | Next, we'll look at some additional properties that will
let us fine tune this animation for even more control.
| | Collapse this transcript |
| Exploring animation delay and the fill-mode property| 00:00 | In the last tutorial, we animated
our unicycle rider across the screen.
| | 00:04 | It was fun but pretty basic.
| | 00:05 | Lucky for us, there are additional
properties that give us a deeper level of control over
| | 00:10 | our animations and let us give
them a little more polish too.
| | 00:12 | In this tutorial we'll look at properties
like animation-delay and animation-fill-mode
| | 00:17 | and how they can give us more
control over how our unicycle rider moves.
| | 00:21 | Right now our animation starts
playing as soon as we load our page.
| | 00:24 | What if we didn't want the
animation to start playing right away?
| | 00:26 | That's where the animation-delay
property comes in handy.
| | 00:30 | Let's go over to Coda to
edit the CSS for this example.
| | 00:33 | And you can follow along with this example
from the exercise files for this tutorial,
| | 00:36 | or you can work with the files
you created last time around.
| | 00:39 | Either one will have you
starting in the same place.
| | 00:41 | So let's add an animation-delay
to our unicycle rider animation.
| | 00:45 | We'll add one additional property here called
animation-delay, and we'll set that delay 2 seconds.
| | 00:50 | That seems like a nice long
enough time that we'll notice.
| | 00:53 | So if we save our CSS now and go back and
preview our animation in our browser, we'll
| | 00:58 | refresh the page, and we will notice
nothing happens for the first 2 seconds and then
| | 01:03 | our animation executes just like it did before.
| | 01:05 | Now we've got a nice pause before
the action of our animation starts.
| | 01:08 | You might have also noticed that when our
unicycle rider got to the end of the animation,
| | 01:12 | he jumped back to his original position.
| | 01:14 | I think I'd rather have him stay at the end off to
the right when the animation completes the motion.
| | 01:18 | To do this, we'll need to take a look
at the animation-fill-mode property.
| | 01:22 | Animation-fill-mode can take on one of four
values, none, backwards, forwards, or both.
| | 01:27 | Let's take a look at a couple of simple ball
animations to demonstrate what animation fill mode can do.
| | 01:32 | None is the value by default if you don't declare
the property at all, just like this ball example here.
| | 01:38 | With the animation-fill-mode of none, it just hops back
to its original position once the animation has finished.
| | 01:44 | This default behavior is pretty awkward looking.
| | 01:46 | When the animation is over, the target of
the animation returns to its intrinsic styles
| | 01:50 | and the animation styles no longer apply.
That's not always what we really want to happen.
| | 01:55 | If we go to Coda and look at the CSS behind
this ball animation, we can make some adjustments
| | 01:59 | to change how this looks.
| | 02:01 | If we explicitly set our animation-fill-mode
to forwards, our ball will maintain the styles
| | 02:08 | from the last executed keyframe of the
animation after the animation has finished.
| | 02:13 | In this case, that will mean our to keyframe which
is the last one and the current animation we are using.
| | 02:18 | So if we save our CSS now and go preview this
animation once more with just that one property
| | 02:23 | added, we'll refresh the page, and now we'll
see that our ball stays at the end and maintains
| | 02:30 | those styles from our last
keyframe once the animation is complete.
| | 02:33 | It's looking a lot better.
| | 02:35 | Now let's take a look at the
animation-fill-mode value of backwards.
| | 02:38 | And to do that, I'm going to go back to
Coda and just change the animation our ball is
| | 02:42 | using to better demonstrate the behavior.
| | 02:44 | So edit our animation name assignment to
take on the other animation we have in our file,
| | 02:49 | the first one we have
listed, called move-left-right.
| | 02:51 | And you might notice that the keyframes for
this animation are defined using percentages,
| | 02:56 | which is our other option besides from and to.
| | 02:58 | We'll be working with percentage
keyframes later in this course as well.
| | 03:02 | As you can probably guess, the reason we use percentage
keyframes is that we can have more than just two.
| | 03:06 | While the keywords from and to are really
handy, they limit us to two keyframes,
| | 03:11 | and sometimes we need more than that.
So that's where percentages come into use.
| | 03:15 | With our animation changed, I'm also going
to uncomment this animation delay and remove
| | 03:19 | our fill-mode line for now, so we can see
what happens with no fill-mode assigned.
| | 03:23 | So we'll save the CSS and
preview our ball animation now.
| | 03:27 | When we refresh the page, you will notice
there's a jump at the very beginning of our
| | 03:31 | animation where the ball jumps to the 0% keyframe
position and then there is another jump at the end.
| | 03:36 | So we have just made this ball
animation really, really awkward.
| | 03:38 | Because during the delay it stays in one
place then it jumps to the first keyframe of our
| | 03:43 | animation, and then it jumps
back when the animation is done.
| | 03:45 | So let's assign an
animation-fill-mode of backwards.
| | 03:48 | We'll save this and then
preview to see how this changed things.
| | 03:53 | So with the animation-fill-mode of backwards,
our ball will take on the styles from our
| | 03:56 | 0% keyframe, the first keyframe in our
animation during that animation delay that we set.
| | 04:01 | So if we go back to our browser and preview,
you will see that our animation now starts
| | 04:05 | in the 0% keyframe position, instead of
its original position off to the left.
| | 04:09 | Of course we are still getting that jump at
the end of our animation, and that's where
| | 04:13 | the animation-fill-mode of both comes in handy.
| | 04:15 | So if we go back to Coda, we'll
change this animation-fill-mode to both.
| | 04:18 | And then we'll preview our
ball animation one last time.
| | 04:22 | Things are looking a whole lot better.
| | 04:25 | Our animation stays in the 0% keyframe
position during the animation delay at the beginning.
| | 04:29 | And then once the animation is over, it
keeps the styles from our final keyframe as well.
| | 04:34 | So that's the animation-fill-mode of both.
| | 04:36 | It takes advantage of both the
behaviors of forwards and backwards.
| | 04:39 | So now that we looked at animation-fill-mode
in detail, let's go back to our unicycle rider
| | 04:44 | animation and see how it can help us out there.
| | 04:47 | So we'll go back to Coda, and we'll open up
the style sheet for our unicycle animation.
| | 04:51 | It's just how we left it off.
| | 04:52 | We have our animation delay set of 2 seconds,
and now let's add an animation-fill-mode property
| | 04:57 | to really round out this animation.
| | 04:59 | Just like the last ball example that we looked
at, we have a delay, so we're definitely going
| | 05:02 | to want to use the fill-mode of backwards.
| | 05:04 | But we also want our unicycle rider to
stay off to the right when it's done, which is
| | 05:08 | technically the behavior of
the animation fill-mode forwards.
| | 05:11 | So I think we want to use the animation-fill-mode
of both here so that way we can take advantage
| | 05:15 | of the animation-fill-mode of both
before the animation starts and after.
| | 05:19 | So, with that one line changed, let's save our
CSS and go back to look at our unicycle animation.
| | 05:25 | We'll refresh the page,
you'll see we still have our delay.
| | 05:28 | And the animation executes, and when it's
done our animation stays right off
| | 05:32 | to the right where we left it.
| | 05:33 | So the animation-fill-mode of both and the
delay have really added to this animation.
| | 05:37 | Just to quickly recap how the animation-fill-mode
works, the animation-fill-mode of backwards
| | 05:42 | takes effect before the animation starts,
and it applies the styling from the first
| | 05:46 | executed keyframe during any animation delay.
| | 05:49 | The animation-fill-mode of forwards applies
styling from the last executed keyframe of
| | 05:53 | your animation after the
animation has completed.
| | 05:56 | And the animation-fill-mode of
both gives you both behaviors.
| | 05:59 | So that is how animation-fill-mode can really
round out your animation and create behaviors
| | 06:03 | that are probably a lot more
like what you're looking for.
| | Collapse this transcript |
| Working with animation direction| 00:00 | There is one more animation property I'd like
to explore here before we say goodbye to our
| | 00:04 | unicycle rider animation, and that's
the property of animation direction.
| | 00:08 | Right now we've got our unicycle rider
moving across the screen from left to right,
| | 00:12 | but I think his act would be a lot more
interesting if he at least changed direction.
| | 00:16 | Animation direction is a property that can help
us get a lot more mileage out of our animations
| | 00:19 | without having to make any
major changes to our keyframes.
| | 00:23 | Specifically, animation direction lets us
manipulate what order our keyframes are executed in.
| | 00:28 | So far our animation has only played forwards, which has
worked out pretty well, but we do have other options.
| | 00:34 | Animation direction can be set to normal,
reverse, alternate, and alternate reverse.
| | 00:38 | This sounds confusing, but
they can really come in handy.
| | 00:41 | An animation direction of normal means that all
iterations of the animation will be played as specified.
| | 00:46 | So your keyframes will play from start to end.
| | 00:48 | From the first keyframe
you defined to the last one.
| | 00:50 | So, from your from keyframe to your
to keyframe or your 0% to your 100%.
| | 00:55 | The animation direction of reverse means
that all iterations of your animations will
| | 00:58 | be played in the reverse direction.
| | 01:00 | So your last keyframe will play first
and your first keyframe will play last.
| | 01:04 | So this would play from your to keyframe to your
from keyframe or your 100% keyframe to your 0% keyframe.
| | 01:11 | The two alternate versions get a little more
complicated, but they're still pretty easy to follow.
| | 01:15 | An animation direction of alternate means
that the direction of your animation will
| | 01:18 | alternate with each iteration of the animation.
| | 01:20 | It will start playing in the normal direction
so that would be 0% to 100% and the second
| | 01:25 | time around it will play in
reverse so that would be 100% to 0.
| | 01:29 | And alternate reverse works the same way, but it starts
playing your animation in reverse first and then normal.
| | 01:34 | Let's go back to our simple ball
animation to show you what these do.
| | 01:37 | They're a lot easier to
see than to just talk about.
| | 01:40 | So, let's look at our simple ball animation
in the browser first to see what happens if
| | 01:44 | we don't specify the animation direction.
| | 01:46 | Normal is the default, and our animation
will play forward through our list of keyframes.
| | 01:50 | So if we refresh the page, we'll
see our ball goes from left to right.
| | 01:53 | To see what happens when we explicitly set
our animation direction to something else,
| | 01:57 | let's go look at the CSS behind this example, and you can
find these examples in the exercise folder for this tutorial.
| | 02:02 | So we'll explicitly add our animation
direction property, and we'll set it to reverse.
| | 02:08 | If we save our CSS file now and go back to
our browser and preview our ball animation
| | 02:13 | once more, we'll reload the page, and
you'll see this time our ball moves from right
| | 02:18 | to left, which is actually going
through our keyframes backwards.
| | 02:21 | And just to verify, we'll go back to our CSS,
and you will see that was playing our to keyframe
| | 02:26 | to our from keyframe, which is the reverse order that
we've actually listed them in, hence the name reverse.
| | 02:31 | So the reverse animation direction plays a
little like you were rewinding your animation.
| | 02:36 | So if we go back up and change our animation direction
property to alternate, we can see how this one works.
| | 02:42 | However, alternate can only be used if your
animation has an iteration count of more than 1.
| | 02:47 | Because the first time it plays, it will play
forwards, and the second time it will play in reverse.
| | 02:51 | So we'll have to make one other change to
see this happen, and we'll go up here and
| | 02:55 | change our animation iteration count to 2.
| | 02:57 | That way it will actually have an
iteration to alternate the direction on.
| | 03:01 | Let's save our CSS and go back and
see how our ball animation looks now.
| | 03:05 | If we refresh our page, our ball animates
twice, first in the normal direction and the
| | 03:10 | second time in the reverse direction.
| | 03:13 | Alternate reverse works
much the same as alternate.
| | 03:16 | The only difference is it starts playing the
animation in reverse first and then forwards.
| | 03:20 | So if we save this and preview now, you'll
see our animation plays in reverse first and
| | 03:24 | then forwards, but it still plays twice,
and it still alternates the direction.
| | 03:29 | Now that we've seen all our options, let's
go back to our unicycle rider animation and
| | 03:33 | see how we could use animation
direction to spice up his act a little bit.
| | 03:37 | So we'll go back to Coda and pull
up the CSS for our unicycle rider.
| | 03:41 | I'd like to see him ride in both directions, so I'm
going to set our animation direction to alternate.
| | 03:49 | That way he'll drive
both forwards and backwards.
| | 03:52 | Of course, we will also have to adjust our
animation iteration count so that way there
| | 03:56 | are two iterations in which
to alternate our direction.
| | 03:59 | So we'll go up here and change our animation
iteration count to 2, and if we save our file
| | 04:04 | and go back and preview our unicycle rider,
we'll refresh the page, we'll see after our
| | 04:10 | 2-second delay, he goes forwards and then backwards,
reversing the animation direction just like we indicated.
| | 04:17 | If you have a keen eye, you may have also
noticed that our animation timing function
| | 04:21 | was reversed when the direction was reversed.
This is a nice built-in touch of CSS animations.
| | 04:27 | Now that our animation is looking how we'd
like it, let's go back to our CSS and add
| | 04:31 | one last step of adding our vendor prefixes.
| | 04:34 | Now we have all our vendor prefixes in place, and we're
ready to view this animation on non-WebKit browsers too.
| | 04:41 | With these additional animation properties
under your belt, you'll able to create even
| | 04:44 | more interesting effects with your CSS animations
without even having to add extra keyframes.
| | Collapse this transcript |
| Understanding easing| 00:00 | Easing is one of those things that I
don't think web designers talk about enough.
| | 00:04 | It's only one aspect of any given animation,
but the easing you choose has the power to
| | 00:08 | greatly affect the way
your animation comes across.
| | 00:10 | So it's a really important factor.
| | 00:13 | By definition, easing is the way speed is
distributed across the duration of our animation.
| | 00:18 | In CSS all easing is handled with
the animation-timing-function property.
| | 00:22 | We have three options for defining animation-timing functions,
predefined keywords, our own cubic Bezier curves, and steps.
| | 00:30 | While steps are certainly an option for
this property, they have their own distinctive
| | 00:34 | concept which doesn't involve easing at all.
| | 00:36 | We'll be talking about them
later in their very own tutorial.
| | 00:39 | There's still plenty of
easing to talk about, though.
| | 00:42 | Let's look at our pre-defined keyword options
in more detail first to get a better picture
| | 00:46 | of what's going on behind the scenes.
| | 00:48 | Our pre-defined keywords are ease, which is the
default, linear, ease-in, ease-out, and ease-in-out.
| | 00:56 | These all sound a little repetitive,
but they kind of build upon each other.
| | 00:59 | So let's go back and refer to our simple ball animation
and see how these different animation-timing-functions
| | 01:04 | can affect the way the animation looks.
| | 01:06 | We'll go back to Coda and pull
up the CSS for our ball animation.
| | 01:10 | We're back on our simple move-right animation,
which has two keyframes moving from a position
| | 01:15 | on the left all the way over to positions
slightly to the right, and we have our duration,
| | 01:19 | iteration count, and fill
modes already filled in for us.
| | 01:22 | So let's add an animation-timing-function property.
| | 01:25 | So let's start with the
animation-timing-function of linear.
| | 01:29 | We'll save the file and then preview our ball
animation in our browser and see how that looks.
| | 01:34 | Our ball moves across the screen rather slow,
thanks to our 3-second duration, at a constant
| | 01:39 | speed the entire time, and that's
the way the linear keyword works.
| | 01:42 | It creates a constant speed of motion
across the entire duration of the animation.
| | 01:47 | This is often perceived as a very mechanical
motion, because nothing in real life actually
| | 01:52 | moves at a constant speed like that.
| | 01:54 | Let's look at a couple other options to see if we can
get something that looks maybe just a bit more organic.
| | 01:59 | If we go back to Coda and then change our
animation-timing-function to ease-in,
| | 02:04 | let's save that and take a little preview.
| | 02:06 | We'll refresh our browser window, and you
can see that our animation starts out very
| | 02:11 | slow and speeds up just a bit near the end.
| | 02:14 | It's still very long, it takes 3 seconds,
but you can see a definite speeding up as
| | 02:18 | we approach the end of the
animation, and this is how ease-in works.
| | 02:21 | It starts out a little slow, and then
speeds up towards the end of the animation.
| | 02:25 | It gives it a feel as if it's kind of taking
its time, maybe moving a little bit slow or
| | 02:30 | perhaps accelerating as it gets near to
the end of the animation, and that definitely
| | 02:34 | feels a little more organic than linear did.
| | 02:37 | Let's go back to Coda and try
ease-out and then preview that.
| | 02:40 | You'll see we start out a little bit fast
and then gradually slow down as we approach
| | 02:44 | the end of our animation, and
that's what ease-out looks like.
| | 02:48 | And you could see how this is also more
organic than linear, similar to how ease-in was,
| | 02:52 | and this ease-out might be something that's
had some force applied to it so that's why it
| | 02:56 | starts out fast and goes slow, maybe
something that was pushed or maybe something that has
| | 03:02 | weight to it and slows down as it approaches
the end of its movement, because it has mass,
| | 03:06 | and that's slowing it down.
| | 03:08 | Let's go back to Coda and
look at our ease-in-out.
| | 03:10 | Ease-in-out as you might have guessed
combines the look of ease-in and ease-out.
| | 03:16 | So if we go back to our browser and refresh
this to see it again, we start out slow,
| | 03:20 | go fastest in the middle, and
then slow down again at the end.
| | 03:23 | So again, it's very organic looking, and
we have this kind of slowing and starting.
| | 03:27 | That is something we see more in the real world,
because we have things like gravity to deal with.
| | 03:33 | One last one to check out if we go back to
Coda, let's look at our ease keyword, which
| | 03:37 | if you remember is actually the
default animation-timing-function.
| | 03:40 | So, if you didn't set any animation-
timing-function at all, you will get ease.
| | 03:45 | And if we go back to our browser and
preview this, we'll notice it looks quite similar
| | 03:49 | to the ease-in-out, starts a bit slow, speeds up the most
in the middle and then slows down drastically at the end.
| | 03:55 | I find that the keyword of ease has a more
dramatic slowing down at the ends, than the
| | 03:59 | keyword of ease-in-out, but you
can see they look pretty similar.
| | 04:02 | Personally, I prefer the ease-in-out
because of the more balanced motion.
| | 04:05 | But if you prefer the look
of ease, you can use that too.
| | 04:08 | The next animation-timing-function
option on our list is cubic Bezier curves.
| | 04:13 | These can seem quite complicated at first
if you've ever seen them in other people's CSS,
| | 04:16 | because the math behind
them is kind of complicated.
| | 04:19 | They really can look like a big string of
random numbers without much meaning behind
| | 04:23 | them, but we've already been looking at them.
| | 04:25 | Each of the keywords options can also
be defined as a cubic Bezier curve.
| | 04:29 | The keywords are a bit like a
shortcut to commonly used Bezier curves.
| | 04:33 | If you want more control than what's offered
by the keywords, you can create your own curve.
| | 04:37 | So let's go to cubic-bezier.com to
take a look at what these graphs look like.
| | 04:42 | When you first get here, it's
going to load a random curve for you.
| | 04:44 | I set up one that happens to have the
linear curve first, so let's take a look at that.
| | 04:49 | If you remember, our animation with the animation-timing-
function of linear had a constant speed, and a constant
| | 04:55 | rate of speed across the entire animation,
and this graph here on the left shows one
| | 04:59 | straight line going up across the whole graph.
| | 05:02 | And this graph represents the
constant speed of that linear animation.
| | 05:06 | If we were to look at one that was a
little bit more complicated or a little bit more
| | 05:09 | interesting, for example, the ease-in-out,
which you can get to by right-clicking and
| | 05:13 | opening in a new tab on this ease-in-out button.
| | 05:16 | Now, you can see our
graph looks a lot different.
| | 05:19 | It's got some steep parts
and some less steep parts.
| | 05:22 | And the main thing to remember with this
cubic Bezier graphs is the steeper the curve is
| | 05:25 | the faster the rate of motion, and
the less steep it is the slower it is.
| | 05:29 | So if you follow the time line on this graph,
you'll notice it starts at a little bit less
| | 05:34 | steep, which is that kind of slow motion at
the beginning of our ease-in-out and in the
| | 05:38 | middle of our ease-in-out animation, our
animation will be the fastest and have the most speed,
| | 05:43 | and then as it gets less steep again
at the end, we see some slowing down.
| | 05:46 | Here in this middle area, we have our ease-in-out graph
in pink plotted against our regular ease keyword graph here.
| | 05:55 | And if we hit GO, we can see
them kind of race each other.
| | 05:57 | You will notice they both start
and finish at the exact same time.
| | 06:01 | But the way they get there and the way their
speed changes across the animation is different.
| | 06:06 | And that's why we'd be interested
in using different types of easing.
| | 06:10 | As you choose different graphs, or even maybe
adjust the graphs yourself on cubic-bezier.com,
| | 06:14 | you start to see that small adjustments in the shape
of the curve will influence the nuances of our animation.
| | 06:21 | You should take a few minutes to play around, change
these handles and then kind of preview what you've created.
| | 06:27 | Your graph will always be this top one, and
you can see it compared against the regular
| | 06:30 | ease keyword just to see
how things are changing.
| | 06:33 | CSS allows us to define our own cubic Bezier
curves, which make the easing possibilities
| | 06:38 | available to us nearly endless.
| | 06:40 | Cease is another tool that let's you
define and preview custom cubic Bezier curves.
| | 06:45 | One additional thing that this tool offers
over cubic-bezier.com is the ports of the
| | 06:50 | pan or easing equations to CSS, and you can
see those here in this drop down list of presets.
| | 06:56 | These offer more refined versions of the
basic ease-in, ease-in-out, and ease-out,
| | 07:01 | easing paradigms that are usually only
available in tweening engines.
| | 07:03 | But with Cease, we can use this
in CSS, too, and that's pretty cool.
| | 07:08 | For both cubic-bezier.com and Cease,
once you've got a curve preview that you like,
| | 07:12 | you can copy and paste the cubic Bezier
definition and use it in your own CSS.
| | 07:16 | Personally, I think that the
ease-in-out back looks pretty cool.
| | 07:21 | That's a pretty fun curve.
| | 07:22 | We'll preview it here, yeah,
that's definitely something I like.
| | 07:25 | So I can go down here where the code is
displayed and grab our cubic Bezier function, copy
| | 07:30 | and paste that, go back to Coda, and then add
this in the animation-timing-function property.
| | 07:36 | So, now we can go back to our browser and
preview our ball animation once again, and
| | 07:41 | we've got this little bit of an elastic
bounce to it, much slower than it was on Cease,
| | 07:45 | because our duration is quite long.
| | 07:47 | But you can see how you can use these tools
to create these curves and preview them and
| | 07:51 | then use them in your own work later.
| | 07:53 | Now that we've taken this more in-depth look
at our easing options in CSS, you'll be able
| | 07:58 | to fine tune your animations with easing
choices that will let you get the exact motion
| | 08:01 | and feel that you're going for.
| | 08:02 | For example, if you're working on something
that's very heavy and may have a lot of mass
| | 08:06 | and therefore has a lot of gravity acting on it,
you might want to work with some variation
| | 08:10 | of ease-out, and depending on the cubic Bezier
variation of ease-out you pick, you can show
| | 08:15 | how much heavier or how
much weight that object has.
| | 08:19 | If you're working on something that can accelerate,
for example, a car that the gas pedal is being
| | 08:23 | pushed down harder or something going downhill,
some variation of ease-in might work, where
| | 08:28 | it starts out slow and then ends up
faster near the end of the motion.
| | 08:33 | And the variations of ease-in or the cubic Bezier
versions of ease-in you'd pick there
| | 08:37 | can show how much faster or how much steeper the hill is
that it's going down or how much more it's accelerating.
| | 08:41 | So there are a whole lot of options for you
to work with and lots you can save with just easing.
| | Collapse this transcript |
| Challenge: Adding keyframes to our animation| 00:00 | In this chapter we've been working on our
unicycle rider animation, and so far it only
| | 00:04 | has a starting point and an
ending point for the animation.
| | 00:07 | For a nice follow-up challenge, let's add
some additional keyframes to the animation
| | 00:11 | we've been working on to make this
unicycle riding act just a little more complex.
| | 00:16 | You can use the files that we've already been
working with, or you can use the starter files
| | 00:19 | I provided in the challenge folder.
| | 00:21 | Remember, keyframes can be defined with
percentages, as well as keywords like from and to.
| | 00:26 | Using percentages fits better with multi-keyframe animations,
which is what you are going to want to create here.
| | 00:31 | So the objectives for this challenge are: to
define the animation keyframes in percentages,
| | 00:36 | to make the unicycle move in more than one direction,
and to make the animation repeat at least twice.
| | 00:42 | This is a nice short challenge, and you should
spend about 10 minutes or so adjusting your animation.
| | 00:46 | Then come back and check out
the solution to see what I made.
| | Collapse this transcript |
| Solution: Adding keyframes to our animation| 00:00 | So let's take a look what I
came up with for this challenge.
| | 00:03 | I have our unicycle rider going back and
forth a little bit at the start, then going off to
| | 00:06 | the right, and going back and forth a
little bit and then completing his routine.
| | 00:10 | So, let's hop over to the CSS
to see how I created this.
| | 00:13 | I made some adjustment to our rider
animation and added a few more keyframes.
| | 00:17 | I started out with our 0% keyframe of translating
nothing, so he starts out in his original position.
| | 00:22 | Then at 20% I moved our unicycle rider
over just a bit to the right, at 35% a little
| | 00:28 | ways back to the left, and then at 85% I moved
him pretty much the entire way over to the right.
| | 00:34 | And at 100% I moved him ever
so slightly over to the left.
| | 00:37 | So that's how I got that
kind of back and forth motion.
| | 00:39 | And these percentages are numbers I just
kind of came up with based on what looked right.
| | 00:43 | There's no real science or math behind them.
| | 00:45 | It was just some adjustments here and
there to get a good look for the animation.
| | 00:48 | And in our animation properties, I kept the
same animation name, made the duration just
| | 00:52 | a bit longer to 4 seconds to give him
a little bit more of a leisurely pace.
| | 00:56 | My animation iteration count is 2, so we could
do the forwards and backwards alternating motion.
| | 01:01 | And I also set my animation direction to
alternate and my fill mode to forwards, so our unicycle
| | 01:06 | rider would stay in position
at the end of the animation.
| | 01:08 | So, that's what I came up with.
| | 01:10 | Hopefully you came up with
something fun, too, for your solution.
| | Collapse this transcript |
|
|
2. CSS Animation Building BlocksCreating a seamlessly looping animation| 00:00 | In this tutorial we'll be
creating an infinite looping animation.
| | 00:03 | CSS is great for this type of animation
because it makes it possible to set up an infinite
| | 00:07 | loop with less code than most other methods.
| | 00:10 | We'll be creating a couple of animated clouds that drift
across the sky, just like the ones you're looking at here.
| | 00:15 | We'll also look at the animation shorthand
syntax and the idea of sharing one animation
| | 00:20 | across multiple elements.
| | 00:21 | So first, let's go into Coda and take
a look at the HTML behind this example.
| | 00:25 | You can see our setup is pretty simple.
| | 00:27 | We have a div with the class of sky, and
within that we have two divs with the class of cloud.
| | 00:32 | Note that each cloud div has two classes,
one that is shared between the two of them,
| | 00:36 | and one that's unique to each.
| | 00:37 | We'll use that unique class to create
slight variations on the animation for each cloud
| | 00:42 | and the shared class for all
the common styles between the two.
| | 00:44 | If we go into our CSS and take a look at our
initial styles, you can see we have the shared
| | 00:49 | styles for the clouds within a cloud class
and then below that we have two classes called
| | 00:54 | fcloud01 and fcloud02 which have the
individual properties for each cloud.
| | 00:58 | The main things that are different between
the two clouds is a slightly staggered top
| | 01:02 | position, one is at 100, one is at 240 pixels
and a slightly staggered zed or z-index position,
| | 01:08 | depending on which way
you like to say that letter.
| | 01:10 | And basically we're just staggering
them one overlapping the other as well.
| | 01:14 | So now that we have our initial styles
all set, let's get to adding some animation.
| | 01:17 | First, we'll go to the bottom of our
style sheet and add our @keyframes block.
| | 01:23 | I'm going to name this animation drift,
since that's pretty much how clouds work.
| | 01:28 | And now we'll get to writing our keyframes.
| | 01:30 | Since in this animation we're basically going
to be moving these clouds from somewhere far
| | 01:34 | off to the left to somewhere far off to
the right so they disappear on both ends,
| | 01:38 | I'm going to use the keywords of from and to, to define
my keyframes because that's exactly what were doing.
| | 01:44 | So we're going to start out from a position
far off to the left, and for that I'm going
| | 01:48 | to use a translation of -250 pixels which will have
us far off to the left where we can't see our clouds.
| | 01:58 | So I've set our translation along the X axis
to -255 pixels and where I got that number
| | 02:03 | is from knowing that our clouds are 250
pixels wide, so -255 pixels will definitely be
| | 02:10 | so far off to the left we
won't be able to see our clouds.
| | 02:13 | Then we'll be animating to a
place that's far off to the right.
| | 02:16 | So I'm just going to copy and paste this
since we'll use translate for our to keyframe
| | 02:20 | as well, and this time I'm going to translate
to a very high number that I know is all the
| | 02:24 | way off to the right, and that happens to be
1350 pixels, so we're covering a lot of ground here.
| | 02:31 | Now that we have our keyframes set, we
can assign this animation to our clouds.
| | 02:35 | We're going to use the same animation for
both but adjust the properties in each individual
| | 02:38 | class to make them behave a little differently.
| | 02:41 | So let's start with the fcloud01, and
we'll add some animation properties here.
| | 02:45 | First, we're going to assign it the animation
of drift since that's the one we just defined.
| | 02:50 | We'll add an animation duration of 25 seconds
because clouds tend not to move very fast,
| | 02:58 | and then we will add an animation timing
function of linear, and I'm picking linear here because
| | 03:05 | I want my clouds to move at a constant pace.
That may not be realistic of actual clouds,
| | 03:10 | but I prefer the look of it in
this case so I'm sticking with it.
| | 03:13 | And we'll add one more bit to our property,
which is the iteration-count, and we're going
| | 03:18 | to set this one to infinite, and that's where
we're going to get our endlessly looping behavior.
| | 03:22 | And this animation will repeat over
and over infinitely, basically forever.
| | 03:26 | Now that we're starting to get the hang of
CSS animation syntax, I think we're ready
| | 03:29 | to start working with the shorthand.
| | 03:32 | We can actually summarize the last four lines we just
wrote into one line using the animation syntax shorthand.
| | 03:37 | And I'll show you how.
| | 03:38 | The animation syntax shorthand works like
this, we start listing out the name of our
| | 03:42 | animation, the duration we'd like it to take,
the timing function that it should use, any
| | 03:48 | delay that might apply, an iteration-count,
any direction, and then any fill-mode that
| | 03:52 | may be applied to our animation as well.
| | 03:55 | If you have trouble remembering the order
for this shorthand you can add a comment to
| | 03:58 | your CSS to remind you just like this one.
| | 04:00 | If the shorthand doesn't actually help you work
faster, it's really not doing you much of any good.
| | 04:05 | So whatever you have to do to remember the
order and what goes in there, definitely do it.
| | 04:08 | So, let's rewrite those
last four lines into one line.
| | 04:11 | We'll start with the animation property,
and then we will add our animation name which
| | 04:17 | is drift, then our duration of 25 seconds,
then our animation timing function of linear,
| | 04:23 | we don't have a delay so we can skip it,
and this going to be smart enough to know what
| | 04:26 | we're doing, and then we'll add our
animation iteration count of infinite.
| | 04:30 | And with that, we can delete these top four lines
since that last one is doing all the same work.
| | 04:36 | You can see this will really come in handy
when you get to adding your vendor prefixes
| | 04:39 | because that's three less lines we need to
prefix, and that's a lot of copying and pasting.
| | 04:43 | So now let's go on to our second cloud.
| | 04:46 | We'll copy the animation properties from
our first one since we'll just be making a few
| | 04:49 | adjustments and paste it into fcloud02.
| | 04:52 | We'll change a couple of
things here for our second cloud.
| | 04:55 | The first thing that we're going to do is
increase the duration for our second cloud.
| | 04:59 | So we'll change that to 35 seconds, and
this means that our second cloud will be using
| | 05:03 | the same keyframes as the first but will
take 10 seconds longer to get through them,
| | 05:07 | so it'll be moving at a slower pace.
| | 05:10 | In addition to that, I'm going to add a delay
to this animation, and according to our shorthand
| | 05:14 | syntax I'm going to add that right here
between linear and infinite, and I'm going to add
| | 05:17 | a 10-second delay to this animation.
| | 05:19 | So this way, not only will it be taking
longer to do the same keyframes as the first cloud,
| | 05:24 | it will start a little bit later.
| | 05:26 | And last but not least, I'm going to add a
fill-mode to the second cloud of backwards
| | 05:31 | and the reason I'm doing that is so during
our 10-second delay our second cloud will
| | 05:36 | maintain the position from our first from
keyframe, and that way it'll stay off to the
| | 05:40 | left for that 10-second
delay before it starts moving.
| | 05:43 | And one last thing before we preview our
animation, let's add all our vendor prefixes
| | 05:47 | so we can look at this in any
browser, not just one with WebKit.
| | 05:51 | Now with all our vendor prefixes in place, we
can save our file and go back to our browser
| | 05:55 | to preview what we've done.
| | 05:56 | So if we refresh our page, our first cloud
starts coming across from the left, going at
| | 06:02 | a very nice slow cloud-like pace, and approximately
10 seconds later our second cloud will show up,
| | 06:07 | going a little bit slower but
using the same keyframes as the first.
| | 06:12 | Being able to reuse animations on multiple
elements like this is a nice feature of CSS animations.
| | 06:17 | You could have multiple elements animating
with the same keyframes, but differing the
| | 06:21 | properties just a little bit can make
things a whole lot more interesting.
| | 06:23 | So it's a good trick to
add to your CSS animations.
| | Collapse this transcript |
| Animating an element into place| 00:00 | In this tutorial we're going to add a little
bit of a personality to a basic social media
| | 00:04 | nav listing by animating it into place with CSS.
| | 00:07 | This is a fun way to draw attention to
certain elements on the page as it loads, but it's
| | 00:11 | definitely one of those
things that's best in small doses.
| | 00:14 | We'll also look at animating more
than one property in our keyframes.
| | 00:18 | We'll be creating a slight bounce-in
animation for our social media nav.
| | 00:22 | So when the page loads, it
will look a little like this.
| | 00:25 | Normally, something like this would be in
site footer, but for simplicity's sake,
| | 00:29 | I've left it as the only element on my page.
| | 00:32 | Let's go into Coda and look at
the HTML behind this example.
| | 00:35 | The HTML behind this nav is
pretty typical nav material.
| | 00:39 | It's a list of links to Flickr,
Dribbble, Twitter, and Facebook.
| | 00:42 | If we switched to our CSS, our starter CSS
is a bit more complex and usual due to
| | 00:47 | the specific background positioning
for each logo image in our nav.
| | 00:50 | Not to worry, though, all the steps adding our animation
are still the same despite all these extra starting styles.
| | 00:55 | I've decided that I'd like to
have my social-nav bounce into place.
| | 00:58 | So, I'll need to create keyframes that
first have it placed out of sight above the page
| | 01:03 | and then I'll have to move it past its normal
position at first so it kind of overcompensates
| | 01:08 | and then move it into its
originally intended position.
| | 01:11 | I'm going to need to do
this with three keyframes.
| | 01:13 | So, let's start writing our @-keyframes block.
| | 01:19 | I'm going to call this animation bounce-in
since that's the effect that we're going for.
| | 01:23 | I'll just add a bit more space
so we can see what we're doing.
| | 01:29 | I'll be defining my keyframes in
percentages since I know I'll need at least three.
| | 01:32 | So, I'll start it with my 0% keyframe, and
in this keyframe I know I want my animation
| | 01:38 | to start with my navigation above the page essentially out
of sight, higher up than we can see in the browser.
| | 01:44 | So we'll set a translation--a translation
along the Y axis of -200 pixels.
| | 01:51 | So that should move us up and out of view.
| | 01:56 | And then to create the balance when my animation
is almost complete, I want it to move past
| | 02:00 | its original position just a little
bit lower than it should be.
| | 02:03 | So I'm going to guess that might be around
90% since that's mostly complete, and I will
| | 02:07 | add a translation here of 8 pixels, so this should
be just a little bit lower than it really should be.
| | 02:18 | And then at 100%, my last keyframe of the
animation, I'll add another translate of 0
| | 02:25 | which will have our navigation end up in
exactly the same place as it would have originally
| | 02:29 | with a translation of nothing, of zero.
| | 02:32 | We want to have the entire navigation move
with this animation so we'll need to assign
| | 02:35 | the animation to the unordered
list that's containing our entire nav.
| | 02:38 | That's up here in our unordered list with the
class of social, so I'll add the animation properties here.
| | 02:45 | We'll add our animation.
| | 02:48 | We'll add the animation name of bounce-in since
that's the one that we just defined keyframes for.
| | 02:52 | We'll set our duration to 1 second so it's
fairly short, nothing super long in this case.
| | 02:58 | I'm going to set my animation timing function
to linear, and I'm going to have this animation
| | 03:02 | iteration count set at 1,
so it will only play one time.
| | 03:06 | The direction will be normal and my
animation fill mode will be backwards.
| | 03:10 | And the reason I'm going to add backwards
in there is so my navigation will stay out
| | 03:14 | of sight at the beginning in case there's
any delay in the animation being applied.
| | 03:18 | I'm also setting my timing function to
linear to let the spacing of my keyframes implied
| | 03:22 | the ease-in of our little bounce.
| | 03:24 | That's easier for me than trying to find
just the right ease-in to create the bounce.
| | 03:27 | It's just one tiny little bounce, so it's pretty
easy to do with the keyframe that we've defined.
| | 03:31 | So now we can save our CSS and go preview
what our navigation looks like in the browser.
| | 03:37 | So if we refresh, our nav starts out of sight, falls in,
gets a little bit too far, and then bounces back into place.
| | 03:43 | So that's pretty much the
effect we are going for.
| | 03:45 | But there's one other thing I'd like to add.
| | 03:47 | Having an element fade in while it
animates into place is a pretty nice touch.
| | 03:51 | So let's go and add that
to our animation as well.
| | 03:54 | So we'll go back to our CSS and scroll back
down to our keyframes, and I'm going to add
| | 03:59 | an additional property to
a couple of our keyframes.
| | 04:01 | I want to have the nav start out as completely
transparent or with its opacity set to 0.
| | 04:07 | So let's add that in to our 0% keyframe.
| | 04:09 | Let's make a little space
and then add opacity of 0.
| | 04:15 | So, when our 0% keyframe while our nav placed
above the page it will also have opacity of 0.
| | 04:20 | Obviously, we're going to need to set
this to something you can actually see.
| | 04:24 | So, we'll also add this
opacity property to our 90% keyframe.
| | 04:28 | Make a little space here, and then set the
opacity at the 90% keyframe to 1 which is
| | 04:34 | completely opaque or actually 100% visible.
| | 04:37 | So, now our navigation will be fading in
while it drops into that initial bottom position.
| | 04:41 | At our 90% keyframe, our opacity is set to 1,
which means our navigation is completely
| | 04:46 | visible, and we don't need to list opacity
again in our 100% keyframe because we don't
| | 04:50 | want it to change any
further during the animation.
| | 04:53 | We want it to stay at 1.
| | 04:55 | If we don't list the property again in
future keyframes to overwrite the last value,
| | 04:59 | it will continue at the last value we
set for the remainder of the animation.
| | 05:02 | CSS treats animations of multiple properties in
the same set of keyframes as nearly independent.
| | 05:08 | They're part of the same keyframes but they don't all have
to change at the exact same time, that's pretty handy.
| | 05:13 | Let's save our CSS and go back and
preview our navigation one more time.
| | 05:18 | So, we'll refresh the page.
| | 05:20 | Now, that we've got an effect we like, let's
head back to our CSS and add the rest of our
| | 05:24 | vendor prefixes so this will work
in browsers that aren't just WebKit.
| | 05:27 | Great, so now we have all our vendor prefixes in, and
we're all set to preview this in any browser we want.
| | 05:32 | We've got a nice little effect going on our
social-nav now while the page loads, and we've
| | 05:36 | started developing slightly more complex animations with
multiple animated properties within one set of keyframes.
| | Collapse this transcript |
| Playing and pausing an animation on hover| 00:00 | In previous tutorials, we created animations that
played regardless of user input, as animations tend to do.
| | 00:06 | CSS is limited in how much they can respond to user input
on its own without help from something like JavaScript.
| | 00:11 | But we can still use that
input a little bit here and there.
| | 00:14 | In this tutorial, we're going to create a
button that cycles its background color in
| | 00:17 | response to the mouse pointer hovering
over it and then pauses the animation when the
| | 00:21 | mouse leaves, just like this button we're looking
at right now. When we hover over it, the animation
| | 00:26 | plays and our background color cycle in an
interesting little glowing pattern, and when
| | 00:30 | we hover off the animation pauses and stops.
| | 00:33 | You can follow along with the exercise files
for this tutorial, or you can skip ahead to
| | 00:37 | the final to see how everything works out.
| | 00:39 | Let's go to Coda and take a look
at the HTML behind this example.
| | 00:42 | It's a very simple HTML, once again, and we
have a div with the class of button and within
| | 00:47 | that we have a link with the
text of the button called Contact Me.
| | 00:51 | For right now, our link is going
nowhere because this is just an example.
| | 00:54 | But in a real situation, this link
would obviously be going somewhere.
| | 00:57 | And if we take a look at our starting styles,
we have a basic setup, setting a background color
| | 01:01 | and the shape of our button, as well as the styles
to define how our link should look inside our button.
| | 01:06 | So let's get started by creating our animation.
| | 01:09 | For this example, we're going to animate between a few
background colors to give the button a unique glow effect.
| | 01:14 | It's definitely something different than we
could get with the transition or other hover effects.
| | 01:18 | So it's unique to animations.
First, we'll define our keyframes.
| | 01:26 | I am going to name this animation glow since
that's more or less what we're going to be doing here.
| | 01:30 | I have picked a few shades of blue and bluish-
greens that I'd like to cycle through for my button.
| | 01:35 | I'll assign each has a background color
property at various percentage keyframes.
| | 01:40 | So I'll start with my 0% keyframe with the
background color that I've already picked.
| | 01:44 | So at our 0% keyframe, we
will add the background color
| | 01:49 | of this shade of blue that I've already
picked ahead the time and then add a 20% keyframe.
| | 01:54 | We'll add another shade of blue, then at 70%,
we will change the background color once again.
| | 02:04 | And then for our last keyframe at 100%, we
will set our background color to one final shade.
| | 02:13 | So I'm writing keyframes like this.
| | 02:15 | It's nice to have all your colors picked
out ahead the time whether you have a specific
| | 02:18 | palette in Photoshop or something similar.
| | 02:20 | I picked the percentages
based on what looked best to me.
| | 02:23 | But really, it's just kind of a made-up effect.
| | 02:25 | So, if certain other percentages or maybe
more colors or more keyframes looks better
| | 02:28 | for you, feel free to add them.
| | 02:30 | Now that we have created our animation,
let's assign this animation to our button.
| | 02:34 | We'll use the shorthand to
assign this animation to our button.
| | 02:37 | So we'll start by adding the animation property.
| | 02:41 | We will use the glow animation, since that's
the one we just made for our animation name.
| | 02:45 | For our duration, we'll select 3 seconds,
and that's just a duration I've picked as
| | 02:48 | looking good for cycling through those colors.
| | 02:50 | We are going to select the animation timing
function of ease just to give it a nice in
| | 02:56 | and out kind of feel to it.
| | 02:57 | We will repeat this animation
an infinite number of times.
| | 03:00 | So our animation iteration count is infinite, and our
animation direction I'm going to set to alternate.
| | 03:07 | And the reason I am doing this is so that
our animation will play forwards through our
| | 03:10 | keyframes then backwards to our keyframes.
| | 03:12 | And that will stop it from having a hard
cut between the 100% and 0% keyframe, because
| | 03:16 | it will keep going back and forth so it will be
a nice smooth transition through all our colors.
| | 03:21 | So let's save everything and
preview our animation right now.
| | 03:24 | So we'll go over to our Browser, Preview our
animation, and you'll see our button is starting
| | 03:29 | to cycle colors slowly over the 3 seconds.
| | 03:32 | Going forwards first then backwards, and sometimes
the change is faster or slower, that all depends
| | 03:37 | on how our keyframes are set up.
So everything is looking good.
| | 03:40 | Let's get on to adding the pause and
play functionality to our animation.
| | 03:43 | So back to our CSS in Coda, we're
going to add a couple of things.
| | 03:46 | First, we'll add one more line to our button
class, and what we're going to do set the
| | 03:51 | animation play state to paused initially.
| | 03:53 | So we have our animation-play-state,
and we'll set that to paused.
| | 04:00 | Animation-play-state can
take two different values.
| | 04:02 | The animation-play-state can be paused or
running and those work just like they sound.
| | 04:07 | If your play-state is
paused, nothing is happening.
| | 04:09 | It's paused like you hit the Pause button.
| | 04:11 | And if your animation-play-state is running,
it's working like you hit the Play button.
| | 04:15 | Our animation is now paused by default, and
if we previewed our button again now, nothing
| | 04:19 | would happen at all because it's paused.
| | 04:22 | Paused animations, however, aren't really
anywhere near as much fun as ones that plays.
| | 04:26 | So let's add a condition for when
our animation will actually play.
| | 04:29 | To do that, we'll add a rule for button:hover, and within
that rule, we'll add another animation-play-state property.
| | 04:38 | So I'll just copy that from up here because
it's really long to type, and this time,
| | 04:43 | I will set it to running.
| | 04:44 | So what this means is that the animation on
our button will be paused initially, but then
| | 04:48 | when we hover over the button, the animation-play-
state will be switched to running and by default,
| | 04:54 | animations are always in a play-state
of running unless we tell it otherwise.
| | 04:57 | Let's go to our browser and see
what our button looks like right now.
| | 05:00 | When we refresh the page,
initially nothing is happening.
| | 05:03 | Our button is just hanging
out like a regular button.
| | 05:06 | But if we hover over it, suddenly the animation
starts playing, and we see that cycling background color.
| | 05:10 | If we hover off of it, the animation pauses,
and you'll notice there is no hard cut.
| | 05:14 | It just stops right where it was.
| | 05:16 | And if we hover back over it, the animation picks up again
right where it paused and keeps going through its cycle.
| | 05:21 | There's some potential here to
create a very unique hover effect.
| | 05:24 | In a way, the button appears to behave slightly
differently each time you hover over it,
| | 05:27 | and it is a more complex effect than we could have gotten
from using a transition or just a regular CSS hover.
| | 05:33 | One more time we'll go back to Coda, and in
our CSS, we'll add our vendor prefixes since
| | 05:37 | we're happy with our animation right now.
| | 05:39 | Now that we have our vendor prefixes in place,
this animation will play in non-WebKit browsers too.
| | 05:44 | CSS animations triggered by hovers are best
suited for subtle and non-essential animations
| | 05:49 | because in older browsers, we wouldn't
actually be able to see this effect at all.
| | 05:52 | For example, if we were looking at this
button in a browser that doesn't support animations
| | 05:57 | at all, we would just see the static
button and really nothing would be lost.
| | 06:00 | So it's important not to include any
essential information in animations like this.
| | 06:04 | For even better control over animations
triggered by interaction, you can combine CSS animations
| | 06:09 | with JavaScript, using JavaScript for
the logic and CSS for the animations.
| | 06:14 | We'll look at that a little bit later in
this course, and it's something to look into
| | 06:17 | if you're really interested in CSS animations.
| | Collapse this transcript |
| Animating 3D transforms| 00:00 | We've been working in just 2D so far.
| | 00:02 | But let's have a look at how we can apply the
animation skills we've learn to 3D transforms as well.
| | 00:07 | If you worked with 3D transforms before,
either statically or with transitions, this tutorial
| | 00:12 | will show you how to use them within animations.
| | 00:14 | If you haven't worked with 3D transforms
before, you may want to review the
| | 00:18 | CSS Transitions and Transforms course first
before watching this tutorial.
| | 00:21 | I won't be getting into much detail on
how the 3D transforms works specifically.
| | 00:26 | In this tutorial, we'll create an effect on
a thumbnail gallery by animating each photo
| | 00:30 | with a 3D transform into place.
| | 00:32 | So it will look a little
something like this when the page loads.
| | 00:35 | At the time of this recording, 3D transforms
are not widely supported by all browsers.
| | 00:40 | If we take a look at the caniuse.com Support
chart, you can see there's a lot of red squares'
| | 00:44 | showing no support or dark green
squares showing just a little bit of support.
| | 00:49 | For that reason, I'm creating an
effect that isn't critical to my content.
| | 00:53 | If my page is viewed in a browser that
doesn't support 3D transforms, my images will still
| | 00:58 | display but they'll just be
missing that little bit of extra flare.
| | 01:01 | Nothing critical will be lost, so I don't
feel the need to create a fallback alternative
| | 01:05 | for this particular effect.
| | 01:07 | We're used to working in the X
and Y axis for positioning in CSS.
| | 01:11 | But with 3D transforms, we have one more
axis to consider, the Z or Zed axis depending on
| | 01:16 | which way you like to say that letter. Our
X axis moves from left to right on our page.
| | 01:21 | Our Y axis is the vertical
axis, moving from top to bottom.
| | 01:25 | Our Zed axis, or Z axis, moves out of the
screen towards us, so higher Z values or Zed values
| | 01:32 | are closer to the viewer.
| | 01:34 | Lower values on the Zed axis are farther
away from the viewer, and the higher values on
| | 01:38 | the Zed axis are closer to you as a viewer.
| | 01:40 | We'll be animating the rotation of
our photos using the Rotate Transform.
| | 01:45 | Rotations can happen
along any of these three axes.
| | 01:47 | Every HTML element has an origin point,
the point at which all transforms will happen
| | 01:52 | from and they are center by default.
The default origin point is in the middle.
| | 01:56 | If we rotate an element along its X axis,
we will be rotating it in 3D space, and for
| | 02:02 | the purposes of our animation, we're going
to move the origin point on our image to the
| | 02:06 | top left so it will kind of
hinge in from the left side.
| | 02:10 | Let's go to Coda and have a look at
the HTML structure behind this effect.
| | 02:14 | We have a whole list of images within our
wrapper div and each one has the usual things
| | 02:18 | you'd expect for an image, a source, and width,
and height, and it also has one additional
| | 02:22 | class assigned to each,
and that's the class of pic.
| | 02:24 | If we take a look at our CSS, there are a
couple of starting styles that are a bit different
| | 02:29 | than what we've looked at before.
| | 02:30 | Specifically in our wrapper div, we
have a perspective set 1000 pixels.
| | 02:35 | For best results when using 3D transforms
especially on a group of objects, it's best
| | 02:40 | to set this perspective at the parent element.
| | 02:42 | And again, if you're not familiar with the
idea of perspective and transforms in 3D,
| | 02:47 | it will be a good idea to check out the
course on CSS Transforms and Transitions to get
| | 02:51 | a little more insight into why it is we
picked this and how we got that number.
| | 02:55 | Perspective essentially defines the focal length of
the imaginary lens you're viewing your object through.
| | 02:59 | The higher the number, the more flat things
will appear, and the lower the number, the
| | 03:03 | more exaggerated and
drastically 3D things will appear.
| | 03:07 | Additionally in our starting CSS, our images have
some positioning styles in place to set them in a grid.
| | 03:12 | We'll add one more rule to set the transform
origin to the top left like we just looked at.
| | 03:18 | So we'll add our transform-origin,
and we will set that to top and left.
| | 03:26 | Having our images rotate from the left
side like we said, we will make it appear more
| | 03:29 | like a hinge rotation than a
rotation around its center.
| | 03:33 | Everything is in place for our animation.
| | 03:35 | So let's take quick look at the
effect we're going to try to create.
| | 03:39 | Imagine this is a top-down view of our
image and the lower line is our browser window.
| | 03:43 | We want to have our image start out
rotated 90 degrees away from our browser window.
| | 03:48 | So that way it
essentially wouldn't exist at all.
| | 03:51 | And then as we create our animation, we're going to want
to rotate it towards being flat against our browser window.
| | 03:57 | So it will start out almost like an open door and
then our animation will cause that door to shut.
| | 04:02 | And then once it's shut, our image will be
flat up against our screen, if that's really
| | 04:06 | how web pages worked, and it will
appear just like an image normally would.
| | 04:09 | It takes a little imagination
to think in 3D sometimes.
| | 04:12 | So let's go back to Coda and actually add
this animation we just looked at to our CSS.
| | 04:16 | We'll start out by adding our keyframes
blocked just like before, and I'm going to call this
| | 04:22 | animation Hinge, since we just discussed
this is going to look a little bit like a door.
| | 04:26 | For this animation, since we're kind of
creating an open door to a closed door, I'm going to
| | 04:31 | use the keywords of from and to, to define my
keyframes because that really describes what we're doing.
| | 04:36 | And we're going to start out moving from a rotation
along the Y axis of 90 degrees that will be our open door,
| | 04:47 | so rotation on our Y axis of 90 degrees, and
then our closed door is essentially having
| | 04:52 | our image flat up against
the browser window again.
| | 04:55 | So we'll just copy and paste
this line so we can use it again.
| | 04:58 | And this time we'll set in our to keyframe
our rotation of 0 degrees, which is essentially
| | 05:03 | no rotation and/or exactly where it would be
if we hadn't bothered to transform it at all,
| | 05:08 | and that's where we want things to end up.
| | 05:10 | With our keyframes defined, let's
assign this animation to our image.
| | 05:13 | We'll assign everything with
the class of pic, this animation.
| | 05:19 | So we'll assign at the animation name of hinge,
since that's the animation we just created.
| | 05:23 | We'll have duration of just 0.5 seconds
because we want this effect to happen very quickly
| | 05:27 | is just an added bit of flare as things load
in, not something you need to sit and watch.
| | 05:32 | I've actually already picked out a cubic-Bezier
function to use to define my animation timing function.
| | 05:37 | I'll just paste that in now.
There's no delay, so I will skip that part.
| | 05:42 | And our animation iteration count will be one.
We just want this to happen once.
| | 05:46 | Our animation direction will be normal.
Our animation-fill-mode will be forwards.
| | 05:50 | And this important so that way our image maintains the
styles from our to keyframe once the animation has completed.
| | 05:56 | So when our animation ends, our image will
stay right where it would have been originally
| | 06:00 | if no effect had happened at all.
So it's animating itself into place.
| | 06:04 | Let's test our animation
and see how things look.
| | 06:06 | So we'll go back over to Chrome, we'll
refresh our browser, and you can see all the images
| | 06:12 | hinged into places if they were kind of
closing a door towards the browser window.
| | 06:16 | For an even more interesting effect, though,
we can try and assign some delays to some
| | 06:19 | of these images because it's a little bit
repetitive to see them all swinging at once.
| | 06:23 | It might be a little interesting
to see them stagger a little bit.
| | 06:26 | So below our class of pic, I'll let a couple
of nth-of-type rules to vary the animations
| | 06:30 | and create a slightly different effect.
| | 06:32 | So this nth-of-type selector will affect
every second image in our list, and we're going
| | 06:38 | to add an animation delay to
it to vary things a little bit.
| | 06:43 | So we'll add a delay of
something small, 0.2 seconds.
| | 06:47 | The whole duration is only 0.5 seconds.
| | 06:49 | We want to stagger this, so we want these
to start before the first batch ends and then
| | 06:53 | we'll copy and paste this whole rule, and
we will add a second nth-of-type rule for
| | 06:58 | every third image just to make things ever
so slightly more varied, and we'll change
| | 07:03 | our delay on these ones to 0.3 just
to have things staggered even more.
| | 07:07 | So now that we've added two animation delays, there's one
other thing we need to change about our animation.
| | 07:12 | The very last thing we have listed in our
animation shorthand is the animation-fill-mode of forwards.
| | 07:17 | But now that we're dealing with delays, we need this
to happen during the delay of our animation as well.
| | 07:22 | So we actually now need an
animation-fill-mode of both.
| | 07:26 | And that means that our images will maintain
the styles from our first from keyframe during
| | 07:30 | their 0.2- or 0.3-second delay, and once they are
done they'll maintain the styles from the to keyframe.
| | 07:35 | So now if we save our file and go over to
our browser to preview, we'll see we have
| | 07:40 | a nice staggered hinge effect on our photos,
and having them stagger is just a little bit
| | 07:44 | more interesting than having
them all open at the same time.
| | 07:47 | The result makes for an effect that looks a
lot more varied because all the images aren't
| | 07:50 | animating in at exactly the same time.
| | 07:53 | So that's the quick look at how we can
apply animations to our 3D transforms.
| | 07:57 | There's obviously a whole lot more
you can do with animations in 3D.
| | 07:59 | So if you're interested in it, it's
something you should definitely look into a lot,
| | 08:03 | and you'll be able to create
some really cool effects.
| | Collapse this transcript |
| Preparing a sprite image for animation| 00:00 | In this tutorial, we're going to look at
the steps involving creating a sprite image
| | 00:04 | to use in our CSS animations.
| | 00:06 | Then in the next tutorial, we'll actually use
this image and put it in motion with an animation.
| | 00:10 | This is the image that we'll be creating.
| | 00:12 | It's a really big image with all
the steps to our animation in it.
| | 00:14 | So you can see it's pretty big, and
there's a lot of individual images that we'll put
| | 00:18 | together to make this one large image.
| | 00:21 | This CSS animation technique is best for
highly illustrated animations and usually ones that
| | 00:25 | are traditionally drawn and
traditionally animated with animation software.
| | 00:29 | Typically these animations will be created
first in something like After Effects or Flash.
| | 00:33 | We won't cover how to illustrate and animate
this in those programs, but we'll be covering
| | 00:37 | how to bring these animations to life with
CSS so they can live natively on the web.
| | 00:42 | So let's get started with our image.
Sprites are often used in web design.
| | 00:46 | Though they typically look something like
this, they're usually a whole bunch of icons
| | 00:50 | that we want to display in different
places on our web page all combined into one
| | 00:54 | big image, so we can just reference
one image to get all our icons.
| | 00:57 | When we use sprites for
animation, the same concept applies.
| | 01:00 | We collect up each frame of our animation, if
you want to think of it that way, and assign
| | 01:04 | this big image as the background to a div and
then move that background to create animation.
| | 01:09 | So if we hop back to Photoshop, this is the
image that we'll be creating for our animation.
| | 01:14 | The source for this sprite image was an image
sequence of an existing traditional animation
| | 01:19 | exported from the animation program, and what we
got out of that was a list of images like this.
| | 01:25 | It doesn't matter which animation program
you use to export these images but all of
| | 01:28 | the major ones have the ability to
export a sequence of images in some way.
| | 01:32 | The resulting list of images is more
important than what you used to export them.
| | 01:36 | The important thing is to make sure that
all your images are the exact same size,
| | 01:39 | and generally, that will happen by default.
| | 01:41 | These particular images were
prepared by a friend of mine
| | 01:43 | who does a lot of traditional animation.
| | 01:45 | Our next step, once we have all our images
in the sequence is we'll need to arrange this
| | 01:49 | into a sprite that we can use in CSS.
| | 01:52 | There are a number of automated tools for
making sprites, but I found that most of them
| | 01:55 | don't give you enough control over
what order your frames will show up in.
| | 01:59 | We only have a handful of frames in this case,
so it's easier to create our sprite image by hand.
| | 02:03 | We'll go into Photoshop to start this process.
| | 02:05 | We'll start by pulling the
images we have into Photoshop.
| | 02:08 | We'll use a built-in script to do the hard
work of importing each of our images for us.
| | 02:12 | We'll go to File, then Scripts,
and Load Files into Stack.
| | 02:17 | Then we'll browse to where we have all our
images, and mine are in this walker image
| | 02:21 | folder, select all our images
in our sequence and then hit OK.
| | 02:26 | Then we get to watch Photoshop do all the hard
work of importing every single image of our sequence.
| | 02:31 | In a couple of seconds, you'll see we have
a new Photoshop file and every layer in that
| | 02:35 | file is one of the images from our
sequence in order according to their file name.
| | 02:40 | So that saved us a lot of time.
| | 02:42 | By default, Photoshop sizes our new image to the
same size as the images we imported to create it.
| | 02:47 | We know that each frame of our
animation is 245 pixels by 400.
| | 02:52 | So our sprite will have to be 245 pixels
wide as it is now and 4000 pixels high, because
| | 02:59 | we have 10 frames, each of them 400 pixels tall.
| | 03:03 | So we'll change our canvas size to 4000
pixels, and make sure we're anchored at the top.
| | 03:10 | And if we zoom out, you can see what we've just created,
and that's basically the start of our sprite image.
| | 03:16 | So yes, this is going to be a very big image, and that's
why short animations work best for this kind of technique.
| | 03:23 | Otherwise, your image could get ridiculously
huge and probably bigger than you'd ever
| | 03:27 | want to use on the Internet.
| | 03:29 | We'll be stacking our images one on top of
another, kind of like making a filmstrip.
| | 03:33 | So I'm going to create some guides to help
make sure I get everything to line up accurately.
| | 03:37 | You can create these guides manually, or if
you like shortcuts like me, you can use
| | 03:41 | a Photoshop plug-in called GuideGuide
which you can get from guideguide.me.
| | 03:46 | It's one that I like to use because it automates the
process of making guides, and that's never a fun thing to do.
| | 03:51 | So back to Photoshop, we'll open our GuideGuide
plug-in, and I'll create guides every 400 pixels,
| | 03:55 | since I know our frames are 400 pixels tall.
| | 03:58 | And if we zoom out, we can see it has created
guides for us every 400 pixels, and it took
| | 04:05 | at about a second, and it
would have taken me a few minutes.
| | 04:08 | So now we'll arrange each
one of our layers in a stack.
| | 04:12 | But I'll move each layer into place using
the guides until we have a stack of all our
| | 04:15 | frames on top of each other.
| | 04:17 | Our very last step, once we have all our
frames stacked up in order is to export the image
| | 04:21 | we just made for the web.
| | 04:23 | Make sure to save your PSD somewhere, too, so
you'll have that source file because it didn't
| | 04:27 | take that long to arrange all these
frames, but I don't really want to do it again.
| | 04:30 | Once you have your file saved, you can export this
file for web, and it doesn't need to be transparent.
| | 04:36 | I'm going to make it a PNG file and then
just hit Save, and I'll save this with my files.
| | 04:43 | Now that we've saved it for web,
our image is ready to be animated.
| | 04:47 | Make a note of the width and height of
your image before you close Photoshop.
| | 04:50 | You'll want to have those handy when we start writing
the CSS for the animation in the next tutorial.
| | Collapse this transcript |
| Animating the sprite image with steps| 00:00 | In our last tutorial, we took a whole series of
images and put them together in one big sprite image.
| | 00:04 | Now in this tutorial, we're going to use that
as the basis of our animation, and we're also
| | 00:09 | going to look at the one remaining timing
function we haven't talked about yet, and that's steps.
| | 00:14 | We'll be using the sprite image we created
in the last tutorial, or you can use the one
| | 00:18 | in the Exercise File folder
from this tutorial to start with.
| | 00:21 | And we'll use that image as
a source for our animation.
| | 00:24 | At the end of this tutorial, we'll have our sprite image
moving like a frame-by-frame animation in our browser.
| | 00:30 | Steps is one of the options we have for our
animation-timing-function, and it's one we
| | 00:33 | haven't talked about too much yet.
| | 00:35 | It's the odd one out, because it
works a little differently than the rest.
| | 00:38 | The syntax for steps also looks a bit different.
| | 00:41 | For the animation-timing-function, you type
out steps, and then in brackets you list the
| | 00:45 | number of steps you'd like to have, which looks a lot different
than the previous animation-timing-functions we've looked at.
| | 00:51 | Steps divides the animation duration into
equal parts based on the number of steps you
| | 00:55 | define so that's why you
have to give it that number.
| | 00:58 | Each of these steps is like a snapshot
or a frame of your animation.
| | 01:01 | It then cycles through each snapshot or
frame for the duration of your animation.
| | 01:06 | So instead of continuous motion, your
animation is divided into a series of holds.
| | 01:11 | Whether you're working from the sprite image
you created in the last tutorial or the one
| | 01:14 | included in the exercise files here, we have our
image all ready to go, so let's get it in motion.
| | 01:19 | We'll go into Coda and look at our basic HTML.
It's very simple, as you probably expect.
| | 01:24 | All we really have in there is one div with
the class of sprite, and we'll use this class
| | 01:28 | to assign a background
image and create our animation.
| | 01:31 | If we take a look at our starting CSS files,
we have some properties for our sprite class,
| | 01:35 | basically width and height, and our
background image is set to our sprite image.
| | 01:39 | However, if we go to our browser and preview
this right now, we just have a static image
| | 01:43 | of the first frame of our animation.
| | 01:45 | That's a good start, but we
need to get it in motion.
| | 01:47 | Just like the other timing-functions, steps works
off a list of keyframes to define your animation.
| | 01:51 | So let's go back to Coda
to define those keyframes.
| | 01:54 | We'll create a keyframes block.
| | 02:00 | I'm going to name this animation walker,
since that's essentially what he's doing.
| | 02:04 | We'll start with the 0% keyframe
setting our background position to 0, 0.
| | 02:13 | This is essentially what we have right now,
and you'll see our 0% keyframe looks an awful
| | 02:17 | a lot like the background
property in our sprite class above.
| | 02:20 | Then we'll add a 100% keyframe, setting
our background position to 0 and -4000.
| | 02:29 | If you remember from the last tutorial, or
you've taken a look at the image we're working
| | 02:32 | with, you'll notice that
our image is 4000 pixels tall.
| | 02:35 | So essentially what we're doing with this
keyframe animation is moving the image all
| | 02:39 | the way across its height.
| | 02:40 | So the background position of your 100% keyframe
needs to be equal to the height of your image,
| | 02:45 | and it also needs to be negative
because we want the image to move up.
| | 02:49 | As our sprite image moves up, frames lower in
the image will begin to be shown, and that's
| | 02:53 | how we'll kind of get this filmstrip
style or sprite sheet style animation.
| | 02:57 | So with our keyframes all set to go,
let's apply our animation to our sprite class.
| | 03:02 | We'll start by adding our animation property,
and we'll assign the animation of walker,
| | 03:08 | which are the keyframes that we just created.
| | 03:10 | We'll have this animation take 2 seconds, which is
a duration I just kind of made up myself for right now.
| | 03:16 | And then for our timing-function, we'll use steps here.
| | 03:19 | So we'll write steps, and then in
brackets we're going to include the number 10.
| | 03:23 | The reason that I'm, including 10 here, because
I know in my sprite image I combine 10 frames
| | 03:27 | or 10 separate images to make my sprite image.
| | 03:30 | So my sprite image has 10
steps to it or 10 frames in it.
| | 03:34 | If you created a different sprite image
that had more frames or less frames, you'd want
| | 03:38 | to adjust this number, and as well as the
background position in our keyframes to reflect
| | 03:42 | the size and number of frames
in the sprite that you are using.
| | 03:45 | And as one last thing, we will set our
animation iteration count to infinite.
| | 03:49 | Luckily, I know the images I've been provided
is actually a repeating walk cycle, so I can
| | 03:55 | infinitely repeat this
animation, and it will loop smoothly.
| | 03:58 | That's going to depend on the
actual images in your sprite.
| | 04:00 | So some may or may not be
created to loop infinitely.
| | 04:03 | Let's save this and preview our animation now.
So we head back to our browser and refresh.
| | 04:09 | Now we see our animation moving.
| | 04:11 | And really what we're doing is just animating
a background image going up not smoothly but
| | 04:15 | in 10 steps to show us each of the 10 frames.
| | 04:18 | Notice how each frame is shown with
no transition or easing in between.
| | 04:21 | It's just a hard cut to the next frame.
| | 04:23 | The smoothness of the animation is a result
of how closely each frame was drawn to the
| | 04:27 | one before it, and the tendency of our eyes and brain
to want to make things appear to be moving smoothly.
| | 04:32 | So it's a pretty neat effect.
| | 04:34 | If you're not entirely happy with the way your
animation looks, we can make some adjustments
| | 04:37 | in the CSS to change the
overall appearance of your animation.
| | 04:41 | If we go back to our CSS in Coda, we can
do something like change the duration of our
| | 04:46 | animation and have the walk
cycle look entirely differently.
| | 04:49 | For example, if we set the duration to 1 second
instead of 2 and then preview our animation,
| | 04:54 | you can see he's walking twice as fast.
| | 04:56 | If we want to exaggerate that even more, we
can maybe set the duration to .5 seconds
| | 05:02 | and go back to our browser
and really have him running.
| | 05:05 | But notice that no matter what, the same
number of steps is happening, and we're just making
| | 05:09 | them happen faster because
they're working over a shorter duration.
| | 05:12 | This technique is perfect for adding little snippets
of traditionally drawn animations to a website or app.
| | 05:17 | It's often used with animated characters like
this one, but with just a little imagination
| | 05:21 | you can use the same technique for reusable
transitions between images, maybe a countdown
| | 05:25 | clock or other things that have a lot
of illustrated and repetitive movements.
| | 05:30 | So it's a great CSS animation
technique to be familiar with.
| | Collapse this transcript |
| Chaining multiple animations on one element| 00:00 | We've been creating and applying single
animations to create our effects so far.
| | 00:05 | But in practice, it's quite likely that
you'll run into a project where you need multiple
| | 00:08 | animations to create the movement you're after.
| | 00:11 | Animating a character or demonstrating a
software feature for instance, or even creating a longer
| | 00:16 | playing effect will require more
than one animation to complete it.
| | 00:19 | We'll be animating a molecule graphic in
isolation for this example, but this chaining technique
| | 00:25 | can be used as part of any
kind of linear animated content.
| | 00:28 | We'll have our molecule rolling from the left
and then scale up and back into its original
| | 00:33 | position, and in the end it will
look a little something like this.
| | 00:36 | Let's go to Coda and take a look
at the HTML behind this example.
| | 00:41 | Our HTML is pretty simple.
| | 00:43 | We have a wrapper div and then one div
with the class of mol for molecule, and that's
| | 00:47 | the one we'll be using for
our animation and the graphic.
| | 00:50 | If we take a look at our starting styles
in our CSS, they're also pretty simple.
| | 00:54 | We have a background image and a width and
height assigned to our mol class, or our molecule.
| | 00:59 | And we also have some general positioning
applied to it before we add our animation.
| | 01:04 | I'm going to use transform to
create the roll-in animation first.
| | 01:07 | I'll be affecting both the
translation and the rotation of our molecule.
| | 01:11 | So let's start writing our
animation with our keyframes block as usual.
| | 01:15 | I'm going to name this first animation
roll-in, since we'll be making it roll in.
| | 01:21 | For our first keyframe at 0%, we will set
the translation off to the left so it starts
| | 01:26 | off to the left, and we'll also
set the rotation to 0 degrees.
| | 01:32 | So we'll translate on the X axis -200
pixels so that will move our molecule off to the
| | 01:36 | left for the start of our animation, and we'll add
an additional transform of a rotation of 0 degrees.
| | 01:42 | To complete our roll-in
animation, we'll add a 100% keyframe.
| | 01:47 | We'll set the same transform
properties to different values.
| | 01:51 | So I'm just going to copy this line here,
and we're going to set our translateX to
| | 01:57 | 0 pixels, which will have our molecule and up
with zero translation on the X axis, which
| | 02:02 | means it will be in its normal position, and
we're also going to add a rotation of 360 degrees.
| | 02:08 | Technically, being rotated 360 degrees looks
exactly the same as being rotated 0 degrees,
| | 02:15 | but our animation will actually show all those
rotation points between 0 and 360 as it plays.
| | 02:20 | Next, let's define the keyframes for our
second animation, and we can do that right below
| | 02:25 | the first in a similar fashion.
| | 02:28 | I'm going to name this animation scale-up,
and we'll complete that keyframe block.
| | 02:34 | Our first keyframe will be at 0% of course,
and I'm going to start with our scale set
| | 02:38 | to 1, which is the same as 100%.
| | 02:42 | Because for whatever reason, scale works on a scale of zero
to 1 as opposed to percentages as you might expect.
| | 02:48 | To give our molecule a bit of spring to it,
I'll set the scale to 1.2 at the 25% keyframe.
| | 02:54 | So you can actually scale things above 100%.
| | 02:58 | You just need to mark it as 1.2 or 3 or
whatever amount of scale you want to add to it.
| | 03:04 | Then I'll go back to a scale of 1 at the
60% keyframe, and I'll just copy and paste
| | 03:09 | these to save myself a little typing.
| | 03:12 | Finally, at the 100% keyframe, I'll
assign the scale of 1.2 once again.
| | 03:18 | This means our molecule will end up at the end of
our animation slightly bigger than the original image.
| | 03:24 | But that's okay, it's just a small scale up, so
we shouldn't see any degradation in the image.
| | 03:28 | In our scale-up animation, I've
chosen these percentages and scale values.
| | 03:32 | More or less, it's just what looked best.
| | 03:34 | This is the kind of thing where you might
want to set up an animation and then adjust
| | 03:37 | the numbers later to see
what really looks best to you.
| | 03:41 | So now with our keyframes all defined,
let's assign our animations to our molecule,
| | 03:45 | so we can see how things are shaping up.
| | 03:47 | We'll go back up to our molecule
class to assign the animation here.
| | 03:50 | When we assign two animations to one element, we need to use
commas to separate the values associated with each animation.
| | 03:58 | So when we're defining the animation-name property,
we're actually going to assign two animations.
| | 04:03 | In the first animation we want
to see is the roll-in animation.
| | 04:06 | That may have a comma and the name of
the second animation we'd like to see.
| | 04:11 | I know we've started using the
animation shorthand in a few of the tutorials.
| | 04:16 | But for this one, I'm going to keep them separate so we can
really get a feel for how we're adding two animations.
| | 04:21 | For all the remaining animation properties
we'll define for this class, we'll use commas
| | 04:25 | to separate the values for the two animations.
| | 04:27 | So our animation duration would look like this,
first, 1 second for our roll-in animation
| | 04:33 | and then 0.75 seconds
for our scale-up animation.
| | 04:38 | Keeping with that trend
we'll add our animation-delay.
| | 04:41 | In this case, we're going to have zero second
as the animation-delay for our roll-in animation
| | 04:46 | because we want that to play right away.
| | 04:48 | But we don't want the scale-up
animation to play until roll-in is done.
| | 04:53 | So we'll set the delay on our scale-up animation to be
the same amount of time that our roll-in animation takes.
| | 04:59 | So add a delay of 1 second to our scale-up
animation, which means it will wait for that
| | 05:04 | 1 second, and during that 1 second
our roll-in animation will take place.
| | 05:08 | It's a nice little trick for how we chain
these animations together on one element.
| | 05:12 | And then we'll add our
animation iteration count.
| | 05:17 | And for both of these, we only wanted to play once, because
this is kind of a chained together entrance for a molecule.
| | 05:22 | So we're just going to have 1 and 1.
| | 05:25 | And when the values for two animations are
the same, we can actually just list it once
| | 05:29 | and then CSS will just continue
to use for the next animation.
| | 05:32 | But personally, I like to leave the two comma-separated
values because it's a lot easier for me to follow later.
| | 05:38 | But if you prefer just seeing one number
there, you can go ahead and do it that way too.
| | 05:43 | And then as our very last property, we'll
add our animation-fill-mode, and I'm going
| | 05:48 | to set this to forward for both.
| | 05:51 | By using forwards for both animations, this
means the molecule will keep the 100% keyframe
| | 05:55 | styles at the end of the roll-in
animation to be ready for our scale-up.
| | 05:59 | And then once our scale-up animation is done,
our molecule will maintain the styles from
| | 06:04 | the 100% keyframe of our scale up animation,
and it will end up just how we wanted it.
| | 06:10 | With all these animation properties set, let's save our
file and preview what we have so far on our browser.
| | 06:15 | So if we refresh, we see our roll-in animation
taking about one second and then our scale-up
| | 06:20 | animation happening in about 0.75 seconds,
and they're each happening one right after
| | 06:25 | each other because of the delay we
set up on our scale in animation.
| | 06:29 | Everything is looking pretty good
but there's one thing I wanted to add.
| | 06:33 | We didn't define an animation timing
function for either of these animations explicitly,
| | 06:37 | which means they're both
using the default of ease.
| | 06:39 | But I think I'd like to change that to add
just a little bit more style to this animation.
| | 06:44 | So we're going to add one more property to our
animation which should be our animation-timing-function.
| | 06:49 | So we'll add our animation-timing-function
here, and for the roll-in, I want it to have
| | 06:54 | a little bit of momentum to
kind of start slow and end faster.
| | 06:57 | So it has its momentum going into a scale-up.
| | 07:00 | So I'm going to use ease-in here, which we know
will start slow and then accelerate as it goes.
| | 07:05 | And then since our scale-up animation has
so many keyframes, the keyframes themselves
| | 07:09 | are kind of indicating a
bit of easing on its own.
| | 07:11 | So I'm going to set the animation-timing-
function for our scale-up animation to linear,
| | 07:16 | and we'll let the keyframes take care
of indicating that easing for us.
| | 07:20 | We'll go back to our browser and preview our
animation again, and it kind of flowed just a bit better.
| | 07:26 | So now that I'm happy with that, once again,
our last but not least step is to add in our
| | 07:30 | vendor prefixes so this animation
will play in non-WebKit browsers.
| | 07:33 | So it will just take a second to do that.
| | 07:37 | So now with all our vendor prefixes in place,
our file is a lot longer, but it's also a
| | 07:42 | much more compatible with non-WebKit
browsers for the time being.
| | 07:45 | Now that you have a chained animation to
start playing around with, why not go back and add
| | 07:49 | some different easing or maybe change the
duration or some other of the animation properties?
| | 07:54 | You might be surprised how much a small
change in properties can really change the look
| | 07:58 | and feel of an animation, plus
it's really fun to play with.
| | Collapse this transcript |
| Challenge: Adding a third animation to the chain| 00:00 | For this challenge, I'd like to see you try
adding a third animation to the chained animations
| | 00:04 | we've already been working on.
| | 00:06 | You can start from the files you had at
the end of the last tutorial, or you can find
| | 00:10 | the same starting files in the
Challenge folder for this chapter.
| | 00:13 | Your third animation can be just about anything.
| | 00:15 | You can change the opacity, maybe shift
the position, anything goes as long as it's
| | 00:19 | a third animation to extend the effect.
| | 00:22 | A couple of tips while you work on this challenge,
remember to use commas to separate the properties
| | 00:27 | for multiple animations and make sure you
add an animation-delay to your third animation
| | 00:32 | so that it plays last in
the chain of animations.
| | 00:35 | This challenge should take you around 10 minutes
or so, depending on how much time you want
| | 00:38 | to spend refining or
adjusting your final animation.
| | 00:41 | When you've got one you're happy with, check back
to see the Solution file and see what I came up with.
| | Collapse this transcript |
| Solution: Adding a third animation to the chain| 00:00 | So here's what I came up
with for this challenge.
| | 00:02 | I'll just refresh the page to show you.
| | 00:05 | I added a third animation that's just a
little bit of a bounce to the end of our chain.
| | 00:09 | So let's go to Coda and look
at the HTML behind my solution.
| | 00:14 | So I added a third animation named bounce,
and I just created a bit of a snappy bounce
| | 00:18 | effect translating on the Y axis.
| | 00:20 | To create this bounce effect, I just created
a few keyframes translating along the Y axis
| | 00:25 | to get an up and down bounce.
| | 00:27 | I started out with the 0% keyframe with no translation
at all so we could start kind of from a blank slate.
| | 00:32 | At 70%, I translated up just a little bit.
| | 00:36 | And then at 80%, I made a big jump so that 10%
jump is pretty big, and it moves pretty fast.
| | 00:41 | Then at my 100% keyframe, I put
everything back to a translation of zero.
| | 00:47 | If we scroll up to where I added my properties,
on our mol class I added the animation-name
| | 00:52 | of bounce to our comma separated
values for all the animation names.
| | 00:55 | In animation-duration, I had it last 0.5 seconds, and
you'll notice it's last on the list with the comma again.
| | 01:02 | The only kind of trick I guess to this
solution is to make sure that the last animation-delay
| | 01:07 | I added was equal to the
duration of the last two animations.
| | 01:11 | So you'll see I added the delay of 1.75 seconds,
which is exactly the combined duration of
| | 01:17 | the roll-in and scale-up animations which
were 1 second and 0.75 seconds, respectively.
| | 01:23 | So that's my solution, and I hope you came
up with something fun for your solution too.
| | 01:28 | I hope you also remembered to include all
your vendor prefixes if you're planning to use
| | 01:31 | this in any kind of a production environment.
| | 01:34 | This is another challenge for
which there was no real correct answer.
| | 01:37 | The more you explore how to make things move
with CSS and to make your ideas come to life,
| | 01:41 | the more interesting effects
you'll be able to come up with.
| | Collapse this transcript |
|
|
3. Project: An Animated Infographic IllustrationA preview of what we'll be creating| 00:00 | In this chapter we're going to be building
an animated and interactive infographic
| | 00:04 | to put some of our CSS animation knowledge into practice.
| | 00:07 | I've designed a little infographic comparing a few
different types of Espresso Drinks and what's in them.
| | 00:12 | The graphic compares the espresso,
milk, and other contents of each drink.
| | 00:16 | Let's take a look at how the infographic
works before we start peeking under the hood.
| | 00:21 | At the top, we have a little animated
header with our coffee cup sliding in and out.
| | 00:24 | We also have a menu where we can
select which drinks to compare.
| | 00:27 | Each time we click a new drink, our versus
circle comes bouncing in to really set off our battle.
| | 00:33 | The data circles for each
drink are also animated in.
| | 00:37 | You might have noticed that I'm running this example off
a local host, and I'm also using some specialty fonts.
| | 00:43 | These aren't necessary to use the example,
I'm just a bit of a font snob, that I wanted
| | 00:46 | to use my Typekit fonts for this example.
| | 00:48 | However, if you run the files from our example
just from your finder or right of your desktop
| | 00:53 | as normal, you'll just see
slightly different fonts.
| | 00:56 | So this is what it would look
like with the default browser fonts.
| | 00:59 | Everything still works exactly the same.
The type just looks a bit different.
| | 01:03 | You can work with it either way, and
you'll get the same functional results.
| | 01:05 | In the next two tutorials, we'll take
a deeper look into how everything works.
| | Collapse this transcript |
| Setting up the HTML structure| 00:00 | Let's start by taking a closer look at the
HTML and CSS structure behind our infographic.
| | 00:04 | We have three main files making up our markup in
CSS, the index.html, base.css, and styles.css files.
| | 00:12 | I'll go through our HTML first.
| | 00:15 | At the very top of the file, we have a
couple of lines here to include Typekit, which I
| | 00:19 | mentioned in the last tutorial is optional.
| | 00:22 | Continuing down to our HTML structure, we have
one div that's containing our entire infographic.
| | 00:27 | Then we have a header section holding
our title and our coffee cup animation.
| | 00:33 | Then further down from that, we have our
navigation where we select which drink we'd like to look at.
| | 00:38 | And then below that we have a profile for
each drink, listing the espresso, milk, and
| | 00:42 | other contents of each drink.
| | 00:44 | And then at the very bottom of our HTML
file we include both a reference to jQuery and
| | 00:48 | the JavaScript file I'll be writing later.
| | 00:51 | Moving to our CSS files, our base.css file
contains the basic typographic structure and
| | 00:57 | a few zeroing out and re-settings that I'm using
just to start off at a good base for our infographic.
| | 01:01 | We won't be working with this file much as most
of the work we'll be doing is in the styles.css.
| | 01:07 | But feel free to poke around if
you're curious of what I have in here.
| | 01:10 | Moving to our styles.css, this is where the
bulk of the CSS we'll actually be working with is.
| | 01:15 | At the very top, we have an import line
importing our base.css and then right below that I have
| | 01:21 | a little comment with all my colors that
I'll be using. I like to keep those handy.
| | 01:24 | But our styles.css file is sectioned out mostly
by the section on the infographic.
| | 01:30 | For example, we have all our styles for our header
right here at the top, then further down the styles
| | 01:35 | for our nav, then the styles
for our drink profiles, and so on.
| | 01:39 | We'll mostly be dealing with the header section,
the profile section, and of course adding an animation section.
| | 01:45 | So let's take a look at
that in the next tutorial.
| | Collapse this transcript |
| Adding the header animation| 00:00 | For our first animation of this project,
we'll animate the coffee cup in our header.
| | 00:04 | This animation is a lot like the ones we've done
previously in the course, so it's a good one to start with.
| | 00:09 | Let's take a look at our final version
first to get a feel for what we're creating.
| | 00:12 | I'll just refresh the page and then we'll
see after a short delay, our coffee cup slides
| | 00:17 | into the middle of our frame.
| | 00:19 | It holds there for a moment and then
slides back out in the other direction.
| | 00:23 | So that's the animation we'll
be creating in this tutorial.
| | 00:26 | If we go to Coda and just look at our HTML
briefly, we'll see that these are the two
| | 00:31 | images we'll be dealing with for this animation.
| | 00:34 | And that's our coffee cup image and the
aperture image that's overlaying our coffee cup.
| | 00:39 | In my initial CSS positioning, I placed
the coffee cup below the aperture image,
| | 00:43 | so that way it's showing up behind it.
| | 00:45 | The reason you can see it when it's in the middle is
our aperture image is actually transparent in the middle.
| | 00:50 | So that's the kind of trick to this animation.
| | 00:52 | The two images layered overtop and the
top one is transparent in the middle.
| | 00:55 | So let's go to our styles.css, and we'll
head all the way to the bottom of the file
| | 01:00 | and start our animation section.
| | 01:02 | The first thing we're going to start with as
usual to create our keyframe is our @keyframes blog.
| | 01:08 | I'm going to call this animation cup-in
because it's the coffee cup moving in.
| | 01:14 | That seems like it will work.
| | 01:15 | Now we want our coffee cup to slide in
somewhat fast and then stay in the middle and just
| | 01:20 | kind of hold there for a
little bit before it makes its exit.
| | 01:23 | If you've ever worked with animation
software like After Effects or similar, you might
| | 01:27 | have called that a hold keyframe or a hold.
| | 01:30 | There aren't really hold keyframes in CSS,
but I'll show you how we can get the same idea.
| | 01:35 | So let's start with the 0% keyframe, and
we'll have a transform with a translate of 0,
| | 01:41 | so that will start our coffee cup
off exactly where it is right now.
| | 01:45 | At about 5%, because we want this animation
at least the entrance to happen pretty quickly,
| | 01:50 | let's add another transform and translate
our coffee cup in to about 103 pixels.
| | 01:57 | Now I've come up with these numbers just by
adjusting things and playing it around it first,
| | 02:00 | so that's why I'm guessing numbers like 103.
I've actually checked this out before.
| | 02:05 | Now we want our coffee cup to kind of hold
in that middle at that 103 pixels position.
| | 02:09 | And in order to do that, what we'll actually
do is create another keyframe that's exactly
| | 02:14 | the same as this 5% keyframe.
| | 02:16 | So I'm just going to copy this and
paste it below and then set this to 80%.
| | 02:22 | This might look a little bit strange to have a 0%, 5%,
and 80% keyframe, where 5% and 80% are exactly the same.
| | 02:29 | But essentially we're creating an animation
with zero change, so our coffee cup will stay
| | 02:34 | static in one position between 5% and 80%.
That's a handy little trick.
| | 02:39 | At the 90% keyframe, we want our coffee
cup to leave the frame off to the right.
| | 02:43 | So we're going to transform it
again just a little further out.
| | 02:47 | We're going to translate it here to 240 pixels.
| | 02:50 | That happens to be so far off to the right
that our coffee cup image will be covered
| | 02:55 | up by the opaque portion of our aperture image.
| | 02:58 | Then one last keyframe we'll be adding is
our 100% keyframe, and we're going to repeat
| | 03:02 | this whole pattern again, because what we want
is for our coffee cup to go over to the right
| | 03:07 | and then stay there just for a little bit
out of sight before it comes back in again.
| | 03:11 | So we will once again do a repetitive keyframe
and make our 100% keyframe the same position
| | 03:16 | as our 90% to create a second sort
of hold at the end of our animation.
| | 03:20 | Now the nice thing is with all these repetitive
keyframes is we can actually make our keyframe
| | 03:25 | notation a lot more compact
by doing a couple of things.
| | 03:28 | Since both our 5% and 80% keyframes are the same, we
can actually notate this by a comma separating them.
| | 03:36 | So adding 5%, 80% with one declaration means
we can eliminate this 80% line here and then
| | 03:42 | we can do the same for the 90% and 100%.
| | 03:45 | We can add a comma, 100%, and
then remove our 100% keyframe line.
| | 03:49 | Now we've just done this animation with even fewer keyframes,
and we don't had to repeat that over and over again.
| | 03:55 | And one other thing we can remove if we'd like to is
when we have a 0% keyframe with a translation of nothing.
| | 04:01 | That's essentially using the same styles that
are already on our coffee cup, and if we delete
| | 04:05 | this line, CSS will automatically take the
existing styles in our coffee cup and make
| | 04:10 | that into a 0% keyframe, even though
we haven't explicitly stated that.
| | 04:14 | So that's a nice little shortcut as well.
| | 04:17 | With our keyframes in place, let's go and
assign this animation to our coffee cup.
| | 04:21 | I should probably fix that
so we have the proper syntax.
| | 04:24 | The semicolon should be outside of the
brackets of my translate, because the semicolons are
| | 04:29 | kind of like the end of the sentence when you've
created your property, not in the middle of your sentence.
| | 04:34 | Our coffee cup is in our header and a div with
a classic opening, and it has the classic cup.
| | 04:39 | So we're just going to scroll up a little
bit 'til we get there, and here we are.
| | 04:43 | Opening cup is exactly the
image we want to deal with.
| | 04:46 | So we're going to add our animation
properties here, and of course we're going to assign it,
| | 04:50 | the cup-in animation that we just created.
| | 04:53 | I'm going to have this animation take 10 seconds, because
we want it to be kind of slow, it's going to repeat a lot.
| | 04:59 | I'll set my animation-
timing-function to ease-in.
| | 05:03 | I'm going to have this repeat infinitely,
and I'm also going to add a delay of 5 seconds,
| | 05:09 | and we'll have our animation-fill-mode set to forwards.
| | 05:13 | So with that all in place, we can save our file and take
a look at what we've created. We'll refresh the page.
| | 05:19 | And then after a short, approximately 5-second
delay, our coffee cup will slide in, it will
| | 05:24 | hold there for a little bit, that's between
our 5% and 80% keyframe, and then it will slide
| | 05:29 | back out once it hits 80%, and there we go,
and it will hold off to the right for just
| | 05:33 | a short while and then come back and repeat.
| | 05:36 | Now if you notice, our 5-second delay only
occurred the first time the animation played.
| | 05:42 | After that, the delay we're seeing is really just that
fake delay we've created between our 90% and 100% keyframe.
| | 05:48 | So when infinitely repeating animations,
the delay only takes place the first time.
| | 05:53 | Next, we'll move on to animating
the data section of our infographic.
| | Collapse this transcript |
| Animating the data| 00:00 | We'll be animating the other two
parts of our infographic in this tutorial.
| | 00:04 | We'll be doing the animations for our VS
circle, as well the circles representing our data.
| | 00:09 | Our VS circle drops in with a hard bounce
when we make a new coffee selection, and our
| | 00:13 | data circles do a sort of less severe
drop in when they first appear on the page.
| | 00:18 | So let's get started
writing each of these animations.
| | 00:21 | We'll head over to our CSS in Coda, back
to our little block of animations that we've
| | 00:25 | set up, and we'll start writing some
new keyframes for these two animations.
| | 00:29 | Let's start with the VS circle first.
| | 00:31 | So we'll start our keyframe block, and I'm
going to call this one bounce-in because that's
| | 00:35 | very much what it's about to do.
| | 00:37 | What we want to have happen is we want our
VS circle to drop-in from pretty far above.
| | 00:42 | We want it to fall to some position passed
its intended position, then bounce up just
| | 00:47 | a little bit and then fall down just
a bit to its final intended position.
| | 00:52 | We'll start with our 0% keyframe, and
we're going to have this start very high.
| | 00:56 | So we'll add a transform that translates our VS circle
up pretty high, and I'm going to go with -500 pixels.
| | 01:04 | This is going to be a negative number,
because we're moving upwards, and there has to be
| | 01:08 | a negative value on our Y axis.
Then for its first drop, maybe we'll pick 70%.
| | 01:15 | We'll set another transform and have this fall
passed its intended position, so we'll say 30 pixels.
| | 01:22 | That will be a bit further than it's really
going to end up, and then at 80% because these
| | 01:27 | bounces are getting smaller, we'll add a
transform that translates our VS circle just up about
| | 01:33 | 10 pixels, so that will be a small bounce up,
and then finally, at 100% we will add transform
| | 01:41 | that translates our VS circle to 0, which is
essentially the exact position it already has styles for.
| | 01:47 | So those keyframes will create our bounce effect, but
I want to add just a little extra touch to this effect.
| | 01:52 | So I'm going to add just a bit more space
here, and I'm going to add a property to
| | 01:57 | a few of our keyframes,
starting with our 0% keyframe.
| | 02:00 | Though a bounce-in is pretty nice, but personally, I prefer
when a bounce-in also is accompanied with a slight change in opacity.
| | 02:07 | So I'm going to start our VS circle
being transparent and set our opacity to 0.
| | 02:10 | So at the start of its bounce-in when it's
making its longest fall, it will actually
| | 02:14 | be transparent at the beginning.
| | 02:17 | And then down here at 80%, I'm going to set the
opacity to 1, and that will have it be completely opaque.
| | 02:25 | So in between 0% and 80% keyframe, our VS circle
will both be changing its opacity and its position.
| | 02:31 | So we'll have a nice fade-in while we're doing our
bounce-in, and it makes for a nice touch to that effect.
| | 02:37 | We have one last animation we need to write,
and that's the drop-in animation for our circles.
| | 02:42 | So, we'll start a new keyframes block, and I'm going to call
this animation drop-in because that's what they're doing.
| | 02:49 | Now for this drop-in, we want a movement
that's less severe than our bounce-in and really
| | 02:53 | we just want our circles to start a little higher up
than their final position and just have one movement down.
| | 02:59 | There's no bouncing involved.
| | 03:00 | So because we only need two positions, we can use
the keywords of from and to, to define our keyframes.
| | 03:06 | And from keyframe I'll set a transform,
but I'll translate our data circles up just
| | 03:13 | a tiny bit, probably about 30
pixels up from their intended position.
| | 03:18 | And in our to keyframe, I'll do another transform that will
translate our circles to 0, so back to their original position.
| | 03:27 | Just like our bounce-in animation, I'd like
to add a little opacity to this one as well.
| | 03:31 | So in our from keyframe, I'm going to add one
more property and set our opacity here to 0.
| | 03:38 | I'm going to do the same in our to
keyframe as well, and we'll set the opacity to 1.
| | 03:44 | So this way while our data circles are doing
that slight drop-in, they'll also do a fade-in
| | 03:47 | from being completely
transparent to being completely opaque.
| | 03:50 | So now with those sets of keyframes in
place, let's go to assigning our animations.
| | 03:56 | We'll be assigning our VS animation via
JavaScript, because we want to have it play each time
| | 04:00 | a selection is made from our menu.
| | 04:02 | So instead of adding the animation properties
directly to our VS class, we're actually going
| | 04:06 | to create a new class that we can
append or remove with JavaScript later.
| | 04:10 | We'll do this right up here in our animation
section just to keep things all in one place.
| | 04:14 | So I'm going to create a class called bounce-in,
conveniently named the same as my animation.
| | 04:19 | That's not required, but
I like to do it that way.
| | 04:22 | In this class, we're going to
assign our animation properties.
| | 04:24 | Of course, we're going to
assign it the name of bounce-in.
| | 04:28 | We'll have a duration of 0.5 seconds,
because it's going to happen pretty quickly.
| | 04:34 | Our animation-timing-function will be ease-in,
and we're going to have this repeat once,
| | 04:40 | and we'll add a fill mode of both.
| | 04:43 | Our data circle's animation will also
replay each time a new selection is made.
| | 04:47 | But since these HTML elements actually get
removed and then re-added to the page each
| | 04:51 | time a selection is made, we won't need
JavaScript to trigger they're playing a second time.
| | 04:56 | So we can add the animation properties
directly to our data circles, and these all happen
| | 05:00 | to be list items within our profile class.
| | 05:04 | So we'll just scroll up here to find them, here
they are, so we can add our animation properties here.
| | 05:10 | We'll assign the animation of drop-in.
| | 05:13 | We'll add an animation duration of 0.25 seconds,
which is pretty fast, but they're very small
| | 05:18 | and they don't have far to go.
| | 05:20 | We'll have an animation-timing-function of ease-out,
and I'm going to set an animation delay of 0.5 seconds.
| | 05:26 | Now you might have noticed that's the exact
same amount of time as our VS circle duration was.
| | 05:32 | So I'm going to have this animation start for all the
data circles roughly right after the VS circle has ended.
| | 05:37 | This timing might not be exact,
but it's going to be pretty close.
| | 05:40 | Then we'll set this to repeat
once and have a fill mode of both.
| | 05:45 | With all that set, we can save our file and head
over to our browser to preview what we've done.
| | 05:50 | Now if we refresh, nothing is going to happen
to our VS circle, because we need to add our
| | 05:54 | JavaScript before the animation
will be triggered at all.
| | 05:57 | But if we scroll down and refresh, we can see
that our data circles have their animation in place.
| | 06:02 | So that's in good progress for this tutorial, and in the
next tutorial we'll add some of that JavaScript interactivity.
| | Collapse this transcript |
| Adding interactivity with JavaScript| 00:00 | In this tutorial, we'll be looking at the
JavaScript we need to trigger our VS circle animation.
| | 00:05 | If you don't have a lot of experience with
JavaScript, don't worry, you'll still be able
| | 00:09 | to follow along with the basic concepts of what
we're creating here, and that's the most important part.
| | 00:14 | Just having an idea of how JavaScript in CSS
can work together for animations will help
| | 00:18 | you come up with some great ideas
of how to you use them in your work.
| | 00:21 | If you'd like to get a little bit more background
in JavaScript at any point, you might want
| | 00:24 | to check out a couple of
other lynda.com courses.
| | 00:26 | There is a course for JavaScript Essential Training,
as well as a course for jQuery Essential Training.
| | 00:32 | I won't be going through every detail of
the JavaScript in this example, just the parts
| | 00:36 | we have to work with for our CSS animations.
| | 00:39 | I've left lots of comments in my final files,
though, so if you'd like to explore them further,
| | 00:43 | there's lots of detail there.
| | 00:44 | We'll be writing some JavaScript or specifically jQuery--
which is a JavaScript library--to restart our VS animation.
| | 00:50 | If you remember, we set our
animation for this element to play only once.
| | 00:54 | But we actually wanted to play once through
every time we make a new coffee selection.
| | 00:57 | So we'll need JavaScript to
help us re-trigger that animation.
| | 01:01 | If we head over to Coda and take a look at our
JavaScript file, we can see what's going on in there.
| | 01:06 | The main function we need to be
concerned about is this one right here.
| | 01:09 | This function will run anytime
an item in our nav is clicked.
| | 01:12 | The bulk of these functions that's already
in place deals with making sure the right
| | 01:16 | selection is made and
changing things the right color.
| | 01:18 | But we want to add
something right at the very end.
| | 01:20 | In our CSS, we created a class called bounce-in,
and we assigned the properties of the animation
| | 01:25 | that we wanted our VS circle to have to that class.
| | 01:28 | So what we're going to do to trigger that
animation to start is actually assign that
| | 01:32 | bounce-in class to our VS circle when
anything in our navigation is clicked.
| | 01:37 | By, including this little bit of JavaScript
to assign the class as part of the function
| | 01:40 | that executes every time the navigation is clicked,
means it will be assigned every time that happens.
| | 01:45 | So here at the very bottom of the function,
we're going to add one additional line.
| | 01:49 | We'll first address our VS circle which happens
to have a class of vs, and we will use a jQuery
| | 01:54 | function called addClass, which as you might imagine
adds a class to that particular div or span or element.
| | 02:00 | In this case a span.
| | 02:01 | And we're going to add the class of bounce-in, because
that's a class we put all our animation properties in.
| | 02:06 | So now it's just that one line, we've actually
triggered an animation to happen with JavaScript.
| | 02:10 | By assigning that bounce-in class which has
all our animation properties to a new element,
| | 02:15 | the animation would immediately execute.
So it's one line, but it's very powerful.
| | 02:19 | We can leave this exactly as it is if we
only wanted to trigger this animation once.
| | 02:23 | This is exactly what we would
need if that's all we were doing.
| | 02:26 | But we've made it a little bit harder on
ourselves, and we want to trigger this animation over
| | 02:30 | and over, which means at some point we're
also going to have to remove this class, because
| | 02:34 | the animation will only be
triggered the first time the class is added.
| | 02:38 | So the question there is how do
we know when the animation is done?
| | 02:41 | Because obviously we don't want to remove the
class until the animation has finished running.
| | 02:46 | If we removed it halfway through, the
animation would abruptly stop, and that's no good.
| | 02:50 | Lucky for us, browsers automatically
broadcast an event when a CSS animation ends.
| | 02:55 | And we can actually listen for
these events and do something with them.
| | 02:58 | So in order to do that, I'm going to do this
outside of our click function because we only
| | 03:02 | want to set up our listening for this event once.
| | 03:04 | We don't want to keep setting it
up every time something is clicked.
| | 03:07 | So we'll move just a little further down
on our file outside of that click function.
| | 03:10 | And then to listen for that event,
we'll again address our VS circle.
| | 03:14 | We'll be listening for the event of webkitAnimationEnd,
and when that event happens, we'll be executing a function.
| | 03:21 | Within that function, we're going to do one
single thing, and that is to remove the class.
| | 03:25 | So in order to remove the class, we'll use
a jQuery function of removeClass, which as
| | 03:29 | you can probably imagine, removes the class from an
element and the class we'll be removing is bounce-in.
| | 03:35 | So what this little block of code means is
that when the webkitAnimationEnd event occurs,
| | 03:39 | we will remove the class of bounce-in from
our VS circle, which means it will be ready
| | 03:43 | to be reapplied next time we click on something.
| | 03:46 | These events are very handy, but
there's currently one major drawback.
| | 03:49 | Each browser vendor uses a
slightly different name for the event.
| | 03:52 | Kind of like what we see with vendor prefixes, but a
little bit worst, because each one has a different name.
| | 03:58 | There absolutely is a method to write this
in a way that will catch the events for all
| | 04:01 | browsers, but it's a bit more
than I can get into you right here.
| | 04:04 | So I'd recommend checking out this SitePoint
article which goes into great detail of how
| | 04:09 | to listen for these events and how to make sure you're
capturing the events for all the various browser vendors.
| | 04:14 | So, now with these additions to our
JavaScript in place, let's save our file and go back
| | 04:19 | and preview of what we've been working on.
| | 04:21 | So if we refresh our page, now when we select
something from our menu, our VS circle bounces
| | 04:26 | in just like we asked it to.
| | 04:28 | With each click, the bouncing class gets
applied and our animation plays.
| | 04:31 | As soon as it hits the end of the animation,
that class is automatically removed.
| | 04:36 | And then when we click again, it's added once more
and the animation can repeat every time we click.
| | 04:40 | And that's a quick look at how you can
use JavaScript to trigger CSS animations.
| | 04:44 | This is a great technique, and
there's a lot more you can do with it.
| | 04:47 | So I'd suggest playing around with it and
finding ways to work it into your own work.
| | Collapse this transcript |
|
|
4. Performance, Browser Support, and FallbacksWhy and when to use CSS animations| 00:00 | With the addition of animation, CSS has joined the list of
possible ways we can create motion using web technologies.
| | 00:05 | In this tutorial, we'll look at how
to decide which of our options to use.
| | 00:10 | Are CSS animations right
for your current project?
| | 00:13 | The answer to that question is rarely
as black and white as we'd like it to be.
| | 00:16 | But I'll give you some factors to consider to
help you answer that all important question.
| | 00:21 | Let's start by looking at the
main strength of CSS animation first.
| | 00:24 | Tests have shown that CSS animations can render faster and
be less memory intensive than a JavaScript equivalent.
| | 00:31 | This happens because the bulk of the work
for rendering a CSS animation is handled by
| | 00:35 | the browser internally, which
allows for some increased efficiency.
| | 00:39 | If you're animating with transforms, as we
often have throughout this course, your CSS
| | 00:44 | animations can also benefit
from hardware acceleration.
| | 00:47 | This means they'll be rendered on a
different internal layer by the browser.
| | 00:51 | If you're interested in reading more about CSS
animation performance versus jQuery performance,
| | 00:56 | I'd recommend checking out this
article by Chris Mills on the Opera Dev site.
| | 01:00 | He goes into a lot more detail and how he
tested this and the results that he got.
| | 01:04 | Personally, the biggest advantage I see for
CSS animations is how easily available they are.
| | 01:10 | There's no plug-ins or libraries to
install before you can start working with motion.
| | 01:14 | You can just jump right in with the
technology you're already using, HTML and CSS.
| | 01:18 | This greatly lowers the barrier to adding
compelling bits of motion to your project.
| | 01:22 | This also makes it easy to add just a little
bit of motion without having to go all out crazy.
| | 01:28 | These are some compelling advantages for sure,
but how do you decide if CSS animations are
| | 01:33 | appropriate for your current project,
especially when it comes to client work?
| | 01:38 | There are two main factors I take into consideration when
deciding if CSS animations are right for a particular project.
| | 01:44 | The first is how critical the content
included in or conveyed by the animation is?
| | 01:48 | The second is which browsers the audiences
for this project are most likely to be using?
| | 01:53 | Let's talk about each of this
in just a little more detail.
| | 01:57 | The best test for deciding if your
animation is critical is to ask yourself if the page
| | 02:01 | or screen in question will still
make sense without the animation.
| | 02:05 | For example, an animation that demonstrates a particular
software feature would be critical to someone's understanding.
| | 02:11 | Whereas, an animation designed to call a
little bit of extra attention to a button
| | 02:15 | on the page may not be so critical.
| | 02:18 | Next, consider the browsers that
will likely be used by your audience.
| | 02:22 | The easiest way to do this is to look at the
browser statistics for the current site and
| | 02:25 | compare that to a site like caniuse.com
that charts browser support for CSS animations.
| | 02:31 | If there are a large percentage of visitors
using older browsers, like IE9, for example,
| | 02:36 | which we see here has 0 support for animations,
there is a good chance that a lot of your
| | 02:40 | visitors won't see your CSS animations
due to lack of browser support.
| | 02:45 | If your animations are critical, using CSS
animations in this case would not be the best idea.
| | 02:50 | If your animations are critical, and there's
a large percentage of less capable or older
| | 02:54 | browsers in your audience, your audience
might be better served by a jQuery based animation
| | 02:59 | or another JavaScript library
with strong older browser support.
| | 03:02 | However, if your animations don't include
critical content, it's a different story.
| | 03:08 | Using CSS animations in this case will provide a slightly
richer experience for those with more capable modern browsers.
| | 03:15 | Anyone using an older or less capable
browser like IE9 won't really be any worse off.
| | 03:21 | This fills with the concept of progressive
enhancement, providing an enhanced experience
| | 03:25 | for more capable browsers, but making sure
that the less capable browsers still have
| | 03:29 | all the necessary and required content.
| | 03:33 | If you'd like to learn more about the concept
of progressive enhancement, I'd highly recommend
| | 03:36 | this article on A List Apart, by Aaron Gustafson.
| | 03:40 | He goes into a lot of detail of the concept behind it
and uses a lot of really great metaphors and illustrations.
| | 03:46 | One last consideration when deciding whether or not to
use CSS animations in a project is mobile browsers.
| | 03:52 | The range of mobile browsers out there
today makes for a very interesting landscape.
| | 03:57 | Many of these mobile browsers, mobile safari for
example, handles CSS animations nearly perfectly.
| | 04:02 | But there are some very interesting quirks
out there in mobile browsers, which maybe
| | 04:06 | only partially supports CSS animations, and that
happens a lot especially in the Android Market.
| | 04:12 | It's impossible to go over every possible
device and browser combination here, but if
| | 04:16 | you happened to be targeting a specific
device or browser version with your project,
| | 04:20 | it's best to start testing early and often
to be sure it has the support you need.
| | 04:25 | If I could sum up all my advice on this topic
in just one thing, I would say to always consider
| | 04:29 | your audience first and go with your
gut on what makes the most sense for them.
| | 04:34 | There are plenty of opportunities to use
CSS animations to enhance the interactions of
| | 04:38 | your site or web app and the opportunities are
only going to increase in a not so distant future.
| | 04:43 | As long as you're sure to consider the
goals of your audience, you'll be off to
| | 04:46 | a great start adding CSS animations to your work.
| | Collapse this transcript |
| Organizing animation code for semantics and fallbacks| 00:00 | Throughout this course we've been
dealing with animations mostly in isolation.
| | 00:03 | In our real world projects, however, our animations are going to
have to mingle with all the other code and assets in our projects.
| | 00:10 | First, let's take a second
to talk about vendor prefixes.
| | 00:12 | Now I won't remind you yet again why you
should use them, but let's look at a couple of ways
| | 00:16 | that make dealing with them a whole lot easier.
| | 00:18 | All of these vendor prefixes do add an awful lot of length
to your code, especially when it comes to animations.
| | 00:25 | Luckily, you don't have to
type it out all yourself.
| | 00:27 | If you're already using a CSS preprocessor
like Sass or LESS, these both have automated
| | 00:32 | ways to take care of
adding the prefixes for you.
| | 00:35 | And actually, if you don't use Sass or LESS already,
that feature alone is worth checking them out for.
| | 00:41 | If you prefer not to work with preprocessors, there
are still options to save yourself some headaches.
| | 00:46 | You can set up some saved code snippets in
your text editor, or you could download a
| | 00:49 | version of something like Prefixer, which
you can actually install and use with your
| | 00:54 | text editor if it's one
that it has an extension for.
| | 00:58 | There are also online tools like
CSS3Please and the CSS3Generator.
| | 01:04 | Both of these tools will let you preview
your CSS in the browser and then copy and paste
| | 01:08 | all the prefixes used into your own style sheet.
| | 01:11 | We'll look at these in a little more detail later
to explain exactly how to use them in your work.
| | 01:15 | Any of these tools I mentioned will
help keep your prefix code more manageable.
| | 01:20 | At the time of this recording, many of the
latest modern browser versions are starting
| | 01:24 | to support animation
properties without prefixes.
| | 01:27 | For example, IE 10, Firefox 16 and higher, as well as
Opera 12 and higher support unprefixed animation properties.
| | 01:35 | As this trend continues, you may be able to
drop vendor prefixes for animation sometime
| | 01:40 | in the near future for certain projects.
But we're not quite at that point yet.
| | 01:44 | The question of where to put your
CSS animation code comes up a lot.
| | 01:47 | Your current workflow and the project in hand will have
a lot to do with this, but here's what I would suggest.
| | 01:53 | Putting all of your animation code in a
separate CSS file, maybe even one called animation.css
| | 01:58 | is an extremely easy way to find your
animations any time you might need to edit them.
| | 02:04 | It also keeps all the multiple browser prefixes out
of sight and out of the way when you don't need them.
| | 02:09 | An animation CSS file might
look a little something like this.
| | 02:14 | You can see that the animation properties
have been assigned to specific HTML classes
| | 02:17 | here at the top of the file.
| | 02:19 | And these classes can be used to
apply the animation to various elements.
| | 02:23 | Each set of properties includes all
the necessary vendor prefixes too.
| | 02:27 | The second part of the CSS animation
file contains all the @keyframe rules.
| | 02:32 | Splitting the animation properties and the
@keyframe rules like this isn't required,
| | 02:36 | but it makes for a nicely
organized and easy file to navigate.
| | 02:40 | Defining your animation properties and
individual classes like this file shows at the top,
| | 02:44 | can also be very useful to get more
mileage out of your animations.
| | 02:48 | You can apply these classes dynamically
with JavaScript for even greater flexibility.
| | 02:53 | Last but not least, what happens when a browser
that lacks CSS animation support encounters
| | 02:58 | your CSS animation code?
It simply ignores it.
| | 03:01 | So in the case of older browsers which don't support
animations at all, your animations will simply be ignored.
| | 03:06 | This is no big deal if your animations are
part of the behavior layer and don't hold
| | 03:10 | any imperative content that
isn't otherwise available.
| | 03:13 | However, if it's imperative that your animations
are seen, even in these older or less capable
| | 03:19 | browsers, you'll need to
create a fall back method.
| | 03:22 | Tools like Modernizr allow you to detect support
for specific CSS features and provide alternate
| | 03:27 | content or options if they're not supported.
| | 03:30 | Briefly, to use Modernizr you go to the download section
and select the features you would like to detect for.
| | 03:37 | In our case, this would be CSS animations, and you can
select any other properties you may be interested in.
| | 03:43 | Then you scroll down and hit the Generate
button to download your own custom version
| | 03:48 | of Modernizr that's only going to
work for the properties you indicated.
| | 03:51 | Then you can download your Custom Build.
| | 03:54 | Once you have your Custom Build of Modernizr
downloaded, you would include it in the head
| | 03:58 | of your HTML document, something like this.
| | 04:01 | And then you would just create a
simple check for Modernizr.cssanimations.
| | 04:06 | And then within that, you can select what
to do if CSS animations are supported or not.
| | 04:11 | For example, if they're not supported, you may
include alternate CSS or perhaps a JavaScript fallback.
| | 04:17 | And if they are included, you can be pretty
happy and just go on with your CSS animations.
| | 04:22 | For a more detailed look at how Modernizr works,
check out their extensive documentation section.
| | 04:28 | If supporting older browsers is vital, you
should consider creating your animations using
| | 04:32 | jQuery or another
JavaScript only method instead.
| | 04:35 | Personally, I find it's more work than its worth to maintain
both a CSS and JavaScript version of the same content.
| | 04:42 | In this situation stick with JavaScript for
now and consider moving to a CSS animation
| | 04:46 | solution in the future, when
there's a wider support in your audience.
| | Collapse this transcript |
| Crafting effective animations| 00:00 | This tutorial will be a
little bit less technical.
| | 00:03 | We'll explore what makes the animation effective,
and we'll discuss what we often use animations
| | 00:07 | for, and where they can make the
most effective impact on your design.
| | 00:10 | I'm sure you've heard the quote, "With
great power comes great responsibility."
| | 00:15 | I doubt a questionable use of CSS animations would
really ever cause true harm, but using them
| | 00:20 | intelligently will go far to making you look smart and
having your audience to really connect with your content.
| | 00:25 | In general, we use animations in user
interface design to do one of the following, to attract
| | 00:31 | our users' attention to a certain area, like
it or not movement really grabs our attention,
| | 00:35 | and that's one of the reasons
banner ads are so hard to ignore.
| | 00:38 | We might also use it to hide or reveal
content in a slider or drawer type UI setting.
| | 00:44 | We might use it to illustrate
or demonstrate a product feature.
| | 00:46 | And we might use it to provide cues and
clues for our users, to make a button stand out
| | 00:51 | a little more, or to show that
something has changed in a dynamic interface.
| | 00:55 | In these situations, it's of the utmost importance that the
animations we create work for our users not against them.
| | 01:01 | Usually this means keeping them slightly
understated and making sure they react immediately when
| | 01:06 | they happen in response to users' input.
| | 01:08 | No one wants to wait for the button they just
clicked to reveal the content they've requested.
| | 01:13 | All the items in that list are factors
that determine how your interface behaves.
| | 01:17 | But animations can also greatly
affect the experience of your site or app.
| | 01:21 | Animations can be used as an additional design detail to
convey your overall concept and the personality of your site.
| | 01:27 | Imagine a site about gardening that uses
natural and earthy colors throughout the design.
| | 01:32 | Adding animations to this site that use
soft organic feeling movement would further the
| | 01:36 | natural and botanical
concepts used in the design.
| | 01:39 | Conversely, fast overly bouncy
animations would really distract from the concept.
| | 01:44 | Let's look at a couple of real
life examples of this as well.
| | 01:48 | In YouTube's site 1 Hour Per Second, the
animations that they use are nice and quirky and have
| | 01:53 | a little bit of bounce to them and kind of
really fit with the illustration style which
| | 01:57 | is also a little bit imperfect and definitely
fits with the copy, which is a little bit funny.
| | 02:01 | So these quirky animations really
fit in with the overall concept.
| | 02:06 | Another real life example that's a little bit
different would be the Google+ Circle Editor.
| | 02:10 | This one is a little bit different where the animation actually
happens as part of the interface you're interacting with.
| | 02:16 | When you select a group of friends and then go to move
them, they're animated in place under a paper clip.
| | 02:21 | So, these both add a little bit of interest
to the UI, but it also is very informative.
| | 02:25 | It shows you, you have three people, all
selected in one place, and you're ready to move them
| | 02:30 | together and drop them
in anyone of your circles.
| | 02:33 | The best way to know for sure if your animation
fits with your design is to test how it feels.
| | 02:38 | Build a prototype and try using it yourself.
Have other team members or friends try it too.
| | 02:44 | How does it feel to you?
What message do you get from it?
| | 02:46 | Does it seem too fast or too slow or too laggy?
| | 02:49 | Iterate on this prototype until you get
something that feels right for your design.
| | 02:53 | It's nearly impossible to know what will work
when it comes to animating, until you try it.
| | 02:58 | The more you try, the more you'll get a feel
for developing effective and elegant animations.
| | Collapse this transcript |
|
|
5. Tools for Creating CSS AnimationsHelpful online tools for creating and building animations| 00:00 | The web design community is full of helpful
people, and because of that we've got a lot
| | 00:04 | of great online tools to
help you create CSS animations.
| | 00:08 | We've touched on some of these tools throughout the course,
so here's the full list of the ones I find the most useful.
| | 00:14 | CSS3Please and CSS3Generator are wonderful
online tools for generating correct animation
| | 00:19 | code and previewing what it might look like.
Both allow you to edit values live on the page.
| | 00:25 | For example, things like your duration, and
actually see the results live after you type them.
| | 00:32 | Once you've got something you like, you can just copy and
paste the code snippet and use it however you'd like.
| | 00:37 | CSS3Generator works in a similar way, but
you just first need to pick what you want
| | 00:41 | to work from, from their list, and then it
gives you a series of options to work with.
| | 00:46 | The two best tools out there for generating
your own cubic Bezier functions for easing
| | 00:50 | and timing functions are
Ceaser and cubic-bezier.com.
| | 00:54 | Ceaser allows you to pick from a list of common
presets based on things like the popular Penner
| | 00:58 | Easing Equations as well as others.
| | 01:00 | And you can also edit the
graph yourself for custom results.
| | 01:03 | So we can pick from this entire list of presets
and also edit the handles to create our own curve.
| | 01:10 | I use Ceaser the most when I have a
particular type of motion in mind, and I'm looking for
| | 01:14 | the equation that will help to find it the best.
| | 01:16 | Cubic-bezier.com doesn't have as many
preview options, but it does give you the ability
| | 01:21 | to compare the easing results from two
different graphs, which is really helpful.
| | 01:25 | In this example, I would be comparing the ease
keyword graph against the linear keyword graph.
| | 01:31 | I can just hit GO and see how
they would work against each other.
| | 01:34 | You can also create custom graphs here and then bookmark
them for sharing with your team later. That's very handy.
| | 01:39 | And then there is the URL that reflects the same numbers
I have up here, and that's how you can bookmark them.
| | 01:45 | If you hate working from a blank slate as
much as I do, there are tools like animate.css
| | 01:49 | and animatable to help you start with
something more than just a blank file.
| | 01:54 | Animate.css is both a live demo and a downloadable library with
CSS animation presets that you can use in your own projects.
| | 02:02 | The best way to use these
is at the starting point.
| | 02:05 | Find one that's close to the effect that you want
to create and edit it to fit what you have in mind.
| | 02:10 | Tweaking some existing code is
often easier than starting from scratch.
| | 02:14 | Animatable is a visual and functional
account of the CSS properties that can be animated.
| | 02:19 | It's a long list, but the site is a lot
more fun than just reading the W3C spec.
| | 02:25 | Last, but certainly not least, if you're
ever curious about the proper use of animation
| | 02:29 | syntax or the reasoning behind any of it,
CSS tricks and the W3C spec are where to go.
| | 02:35 | It's true that the W3C spec on animations is
a very dry read, but the in-depth explanations
| | 02:41 | behind the spec are pretty useful.
| | 02:43 | For friendlier explanations,
CSS tricks have been covered.
| | 02:46 | There's an entire section in the Almanac on
animations and many of the post include tips
| | 02:50 | on using animations and other
CSS3 properties in the real world.
| | 02:54 | These sites are all ones that I use
regularly when working on a project with animations,
| | 02:58 | and I hope you find them helpful too.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | I'm really excited about the options that
CSS animations open up for us, which means
| | 00:04 | there's still a whole lot of
potential to be discovered.
| | 00:07 | For next steps, as you continue working with
CSS animations, I encourage you to experiment
| | 00:12 | and play as much as possible,
really have fun with it.
| | 00:14 | There are a handful of lynda.com courses you
might want to check out, if you haven't already.
| | 00:19 | This would include CSS with LESS and Sass, which we
touched on just briefly, also CSS: Transitions and Transforms.
| | 00:26 | And if you wanted to learn a little more about
JavaScript, there's jQuery Essential Training
| | 00:31 | as well as JavaScript Essential Training.
| | Collapse this transcript |
|
|
