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!

  • 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