Animations: Part 1


In this video, we show you how to get started with keyframe animation in CSS3. You'll learn how to make an element appear as though it's jumping off the page!

Video Transcript

  • 0:00

    [?mellow guitar music?]

  • 0:03

    Think Vitamin Membership - Est. 2010

  • 0:07

    CSS3 Animation - Animations: Part 1 with Nick Pettit

  • 0:12

    CSS3 animations are very similar to CSS3 transitions

  • 0:18

    except they allow you to animate your elements with a lot more precision.

  • 0:22

    Let's take a look at how to create our very first animation.

  • 0:26

    Now, you can see here that we have our same basic page

  • 0:31

    with a div in the center and a paragraph,

  • 0:35

    and switching over to my text editor,

  • 0:38

    you can see that we have our wrapper, our div, and our paragraph

  • 0:42

    There's some basic CSS just to boot-strap the page

  • 0:46

    and finally, we'll be doing our styles in a separate style sheet.

  • 0:51

    Now, to start off, let's create an animation, see what it looks like in the browser,

  • 0:56

    and then step through each part, one at a time.

  • 1:00

    Our goal will be to create an element that appears to leap off the page.

  • 1:04

    So to start out, I will create a webkit-keyFrames rule

  • 1:14

    called bounce

  • 1:17

    and we'll create a few keyframes in here

  • 1:24

    use the webkit transform: property,

  • 1:27

    and we'll scale our element (1,0),

  • 1:33

    and we'll also rotate it.

  • 1:40

    We want this to animate to another transform property

  • 1:47

    and we want to scale it up a little bit, and we want to rotate it just a little bit.

  • 1:55

    Okay, now we can select our element and we'll use the animation we just created,

  • 2:08

    and we'll give it a duration of about two seconds.

  • 2:20

    Now, switching back to Safari and refreshing the page,

  • 2:24

    you can see that we've created a basic animation.

  • 2:28

    By continuously refreshing the page, we can play the animation

  • 2:32

    over and over again.

  • 2:36

    Now, let's switch back to our text editor, because there's a lot of code here

  • 2:41

    so let's go through this one step at a time.

  • 2:44

    The first part of this is called the webkit-keyFrames rule.

  • 2:50

    This is a CSS rule and not a property,

  • 2:53

    as denoted by the @ sign at the beginning.

  • 2:57

    This code block contains rule sets called keyFrames

  • 3:02

    A keyFrame is a static state or key moment in your animation

  • 3:07

    that is defined by various CSS properties

  • 3:11

    and browsers that support CSS3 animation

  • 3:14

    are capable of interpolating between these keyFrames.

  • 3:17

    Now, in this case, we've called our keyFrame animation 'bounce'

  • 3:21

    but you can name it whatever you'd like.

  • 3:25

    The bounce animation that we've created has two keyFrames.

  • 3:29

    The first one, which is defined by the 'from' keyword,

  • 3:33

    starts out with a webkit-transform

  • 3:36

    where the element is normally scaled and normally rotated.

  • 3:40

    The second one is defined by the 'to' keyword,

  • 3:44

    and this is where our animation ends.

  • 3:47

    In this case, we've scaled our element by 1.2

  • 3:50

    and we've rotated it ten degrees.

  • 3:54

    Now, it's possible to specify more than two keyframes,

  • 3:57

    but we'll talk about this later.

  • 4:00

    Once you've defined some keyframe rules,

  • 4:03

    you can use your rules with the webkit-animation-name: property.

  • 4:06

    The animation is called 'bounce,'

  • 4:10

    so that's the value that we'll give to webkit-animation-name.

  • 4:15

    The next property is called webkit-animation.duration.

  • 4:21

    In this case, we've set our animation to last for two seconds,

  • 4:25

    but we can change this value to something like 0.5 seconds

  • 4:30

    if we want our animation to play faster over a shorter period of time.

  • 4:34

    Let's try that out--so we'll change two seconds to 0.5 seconds,

  • 4:40

    and when we refresh in Safari, you can see

  • 4:43

    that our animation plays a little bit faster

  • 4:46

    and again, I'm just refreshing the page, over and over again

  • 4:51

    to make the animation play continuously.

  • 4:56

    Now, this animation isn't great.

  • 4:59

    There's a lot of things that we could do to improve this.

  • 5:02

    First of all, we should be able to make our animation loop

  • 5:05

    instead of refreshing the browser every time that we want to see it play.

  • 5:09

    Let's try that out--so switching back to our text editor,

  • 5:12

    we will change this back to two seconds,

  • 5:15

    and we'll add the webkit-animation: iteration-count property,

  • 5:25

    and we'll give it the value 'infinite.'

  • 5:29

    When we switch back to Safari,

  • 5:32

    you can see that our animation now plays continuously,

  • 5:36

    without refreshing the page.

  • 5:39

    The webkit animation-iteration count- property

  • 5:43

    specifies how many times you want your animation to play.

  • 5:47

    By using the keyword 'infinite' we tell the browser

  • 5:50

    to play our animation an infinite number of times.

  • 5:55

    We can also pass numerical values here.

  • 5:58

    If we want our animation to play twice, we can pass the value '2.'

  • 6:03

    So when I switch back to Safari and refresh,

  • 6:07

    our animation will play once, and it will play again, and then it will stop.

  • 6:12

    Now, currently, our element hovers off the page slightly,

  • 6:15

    then jumps back to its original starting position.

  • 6:19

    We want our animation to be able to play smoothly,

  • 6:22

    and reverse itself after it's played.

  • 6:25

    Fortunately, we can use the webkit-animation-direction property.

  • 6:30

    Let's try that out.

  • 6:32

    So I'll type webkit-animation-direction:, and we'll give it the value 'alternate'

  • 6:44

    and we'll change iteration-count back to 'infinite.'

  • 6:49

    So when I switch over to Safari and refresh the browser,

  • 6:53

    you can see that our animation now plays forward,

  • 6:58

    and then plays backwards.

  • 7:01

    By using the constant 'alternate,' you tell the browser

  • 7:04

    that after your animation has played once,

  • 7:07

    you'd like it to be played in reverse.

  • 7:10

    Keep in mind that if you want one full cycle

  • 7:13

    of forward and reverse animation,

  • 7:16

    you must set the webkit-animation-iteration-count property to a value

  • 7:22

    of at least two.

  • 7:25

    Each run through the animation--whether it's forward or backward--

  • 7:28

    counts as one iteration.

  • 7:31

    Our animation is starting to look pretty good,

  • 7:34

    but there's a lot more we can do to improve it.

  • 7:37

    In the next video, we'll take a look at several more animation properties.

  • 7:40

    [?mellow guitar music?]

  • 7:43

    Think Vitamin Membership - Est. 2010

Show full transcript


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

Sign up


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

Sign up


  • Nick Pettit

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