Bummer!

This is just a preview. You need to be signed in with a Basic or Pro account to view the entire video.

Start a free Silver trial
to watch this video

Sign up for Treehouse
Animations: Part 2

Animations: Part 2

7:34

This video introduces several additional animation properties and cleans up the code with a consolidated syntax. The effect of an element jumping off the page is further enhanced with a box-shadow and keyframe animation.


Video Transcript

  • 0:00

    [?mellow guitar music?]

  • 0:03

    Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com

  • 0:07

    CSS3 Animation - Animations: Part 2 with Nick Pettit

  • 0:13

    In the previous video, we created a page element that appears to rise off the page

  • 0:18

    and then set itself back down.

  • 0:20

    Let's build on that effect with some additional CSS3 animation properties.

  • 0:25

    Now, this is starting to look much less clunky,

  • 0:28

    but we can make our animation play even more smoothly

  • 0:31

    by using a timing function, using the webkit animation timing function property.

  • 0:38

    So let's try that out.

  • 0:40

    So we will type out webkit-animation-timing-function:

  • 0:48

    and we'll use the ease-in-out timing function.

  • 0:54

    Switching back to Safari, you can see what it looks like now,

  • 0:58

    and when I refresh the browser, you can see that our animation plays

  • 1:02

    a lot more smoothly with some easing.

  • 1:08

    Using the webkit-animation-timing-function property, you can apply several constants,

  • 1:14

    such as ease-in-out, as we've done in this case,

  • 1:18

    or any of the same constants that you can use with transitions,

  • 1:22

    such as linear, ease, ease in, ease out,

  • 1:28

    or you can even define your own timing functions with the cubic Bezier function.

  • 1:35

    Finally, the last property is called webkit-animation-delay.

  • 1:41

    By giving this property a time value, we can delay when our animation starts playing.

  • 1:47

    So let's try that out.

  • 1:49

    We'll type webkit-animation-delay: and we'll give it a value of about one second.

  • 1:58

    When we switch back to Safari and refresh the browser,

  • 2:03

    you can see that we had to wait about one second before our animation started.

  • 2:09

    I'll refresh the browser one more time,

  • 2:12

    just so you can see.

  • 2:15

    Now, in this case, we don't need to delay the start of our animation,

  • 2:18

    but the property is there if you need it, so we'll go ahead and get rid of the

  • 2:22

    webkit-animation-delay property.

  • 2:25

    Now, as you can see, we're building up a lot of properties here.

  • 2:28

    This is a lot of typing, so fortunately, there's a shorthand for all this.

  • 2:33

    We can use the webkit-animation property to consolidate all of these

  • 2:39

    into a single property.

  • 2:41

    So we will delete everything that we have here,

  • 2:45

    and we'll type out webkit-animation: and we'll use the bounce animation,

  • 2:56

    we'll give it about one second, we'll ease-in-out of it, we want it to loop infinitely,

  • 3:05

    and we want it to alternate.

  • 3:09

    Switching back to Safari, you can see that our animation

  • 3:14

    looks exactly the same when defined with a single property.

  • 3:18

    Pretty cool.

  • 3:20

    Now, let's go back.

  • 3:22

    The arguments from left to right are the name of our animation,

  • 3:28

    the duration of our animation,

  • 3:30

    the timing function,

  • 3:33

    the iteration count,

  • 3:35

    and the direction.

  • 3:37

    We could also include a delay here if we needed to.

  • 3:40

    Now that our animation plays well, let's go back

  • 3:44

    to the keyFrames that we set up earlier.

  • 3:47

    Let's try to add a slight flourish towards the middle,

  • 3:50

    so that our element will rise off the page,

  • 3:53

    do a quick twist in the opposite direction,

  • 3:56

    and then settle back down onto the page.

  • 4:00

    To do this, we're going to need more than just our 'from' and 'to' keyFrames

  • 4:05

    Normally, you would specify keyFrames using percentage values

  • 4:09

    starting with 0 and ending at 100.

  • 4:13

    If you only have two keyFrames,

  • 4:16

    you can use the more human-readable aliases,

  • 4:19

    'from' and 'to,' which are actually just representative

  • 4:23

    of 0 and 100 percent, respectively.

  • 4:27

    Let's start out by changing them to 0% and 100%.

  • 4:34

    Now, we want to add a keyFrame at the end,

  • 4:38

    so we'll change our current 100% state to be 70% instead,

  • 4:45

    and then we'll create a new 100% keyFrame.

  • 4:52

    So we'll type webkit-transform:

  • 4:58

    and we'll leave the scale exactly the same as the 70% state

  • 5:04

    and we'll rotate it slightly to the left.

  • 5:12

    When we switch back to Safari, you can see that our element

  • 5:16

    rises off the page, does a quick twist to the left,

  • 5:20

    and then settles back down.

  • 5:23

    Now we're almost done with our animation.

  • 5:26

    To really complete the illusion, though, of the element rising off the page,

  • 5:31

    we should add a shadow under it.

  • 5:34

    Fortunately, each keyFrame can animate any number of properties.

  • 5:38

    Let's add a box shadow to each keyFrame for some added realism.

  • 5:43

    So we'll go to our first keyFrame, and we'll start out with a webkit-box-shadow

  • 5:52

    and we'll give it an 'x' value of 1, a 'y' value of 1, we'll give it a blur radius of 2 pixels,

  • 6:01

    and we'll use the rgba color model and we'll set it to black,

  • 6:07

    and we'll give it an opacity of about 0.7.

  • 6:14

    Now, going down to our 70% keyFrame,

  • 6:18

    we'll add another box shadow.

  • 6:23

    At this point, our element is risen slightly off the page

  • 6:28

    so we want to offset the shadow a little bit--

  • 6:32

    so we'll give it an 'x' value of 20 pixels and a 'y' value of 20 pixels--

  • 6:37

    and we also want to increase the blur radius,

  • 6:41

    so we'll give that a value of about 80 pixels.

  • 6:45

    As our element rises off the page, it should decrease in opacity a little bit

  • 6:52

    because more ambient light should be flooding under it.

  • 6:56

    So we'll give the rgba alpha value about 0.2 and we'll copy and paste that

  • 7:02

    down to our 100% keyFrame, save that out,

  • 7:08

    and when we switch back to Safari and refresh,

  • 7:12

    you can see that we have a really nice shadow effect now.

  • 7:19

    Those are the basics of animation in CSS3.

  • 7:23

    In the next few videos, we'll learn how to combine all that we've learned

  • 7:26

    into a final project.

  • 7:29

    [?mellow guitar music?]

  • 7:32

    Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com

Show full transcript

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.