Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.

Start a free Basic trial
to watch this video

Sign up for Treehouse
Animations: Part 2

Animations: Part 2


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.

  • 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