1stwebdesigner

How to Use CSS3 and Photoshop to Animate Objects

Posted: 01 Jul 2014 06:00 AM PDT

Back in the old days, animations with CSS is only limited to hovering effects. Thanks to the power of CSS3 animation, it is now possible to create amazing effects without the use of JavaScript plugins.

The introduction of CSS3 keyframes rule has increased the ability of CSS to create or animate objects in a more advanced and amazing way. Using this rule, you can change the set of CSS styles many times.

In today’s tutorial, I am going to show you how to animate a giraffe vector character walking forward with the fences, clouds and background. Please take note that this is not an introductory tutorial for CSS3 animation. If you don't know how CSS3 animation works, I suggest visiting this page.

Resources You Need to Complete This Tutorial

PSD design file or you can create your own
Reset.css
Time and Patience

Download Source Files View Demo

Folder Structure

folder

The file structure will consist of four folders and one HTML file:

index.html – This will serve as the main file. All of the markup will be utilized using this file
img folder – For the images
css folder – For the styling (CSS)

Preparing the elements

Download the PSD file and open it in Photoshop. Notice that each element is separated on layers panel.

open

layers

You can import each individual element as png files by dragging each layer to a new Photoshop document file and removing the background. However, for the limbs and the tail of the giraffe vector character (except for the body itself), we need to add an extra space on the top or bottom of the anchor point of each element.

This will depend on where will be the anchor point of the body parts. The anchor point is the point intersection, where in the body and the limbs and tails connect and where the CSS rotation will be implemented. See image below.

anchor

To do this, go ahead and drag one of the limbs on the new Photoshop document file, delete the background and use the rulers to point out where you want your anchor point to be.

anchor-point

Next, click on the rectangular marquee tool and get the biggest portion you see between the grids (rulers) you set up on the anchor point.

For this example, the dimension I got from the marquee selection tool is 19px X 119px (you can check this on the info panel). I will double the size of the height and add this at the top of the anchor point where the limbs and the body connect.

anchor-marquee

info-panel

Go to Image -> Canvas Size and put on the height – 238px which is the double size of what we got from the marquee selection tool. The anchor point will be pointing upwards since the rotation and the anchor point will be implemented on the top, giving some extra space. Hit OK.

canvas

added-top

Now, repeat each step above for the rest of the body parts. Just be careful where you are adding space with the image.

Getting Started

First, we need to add the following codes on the Head section. This will include the CSS libraries.

  <!DOCTYPE html>  <html lang="en">    <head>            <title>Animating</title>             <link href="css/reset.css" media="screen" rel="stylesheet">             <link href="css/style.css" media="screen" rel="stylesheet">  </head>

The HTML

For the markup, add all of the imported PNG files and wrap them in a div with an ID giraffe-animation markup.

        <div id="giraffe-animation">                <img id="clouds" src="img/clouds2.png"/>                <img id="fence" src="img/fence.png"/>                <img id="back-left" src="img/back-left.png"/>                <img id="front-left" src="img/front-left.png"/>                <img id="tail" src="img/tail.png"/>                <img id="main-body" src="img/body.png"/>                <img id="back-right" src="img/back-right.png"/>                <img id="front-right" src="img/front-right.png"/>        </div>

By this time, you can see a similar result like the image below:

The CSS

For the CSS, add styles on the container giraffe-animation, which will include the background image. Give it a height, width and a relative position. Also, hide all of the overflowed elements to keep all of the layers inside the container. Then, set up the position on each element and give each of them an absolute position.

    #giraffe-animation {      width: 800px;      height: 600px;      background: url(../img/background.png)top left no-repeat;      border: 4px solid #373737;      margin: 20px auto 0;      position: relative;      overflow: hidden;  }    #clouds {      position: absolute;      left: 0;      top: 55px;  }    #fence {      position: absolute;      left: -10px;      top: 173px;  }    #main-body {      position: absolute;      left: 293px;      top: 90px;  }    #front-left {      position: absolute;      left: 308px;      top: 292px;  }    #back-left {      position: absolute;      left: 332px;      top: 304px;  }    #tail {      position: absolute;      left: 239px;      top: 305px;  }    #front-right {      position: absolute;      left: 429px;      top: 296px;  }    #back-right {      position: absolute;      left: 446px;      top: 277px;  }

After adding all of these codes, you can see similar result like the image below.
box

Now, let’s add the keyframes rule for the limbs. This will give the limbs rotate properties using from and to keywords. Copy and paste the code below.

    @-webkit-keyframes limb1{      from {-webkit-transform: rotate(-5deg);}      to {-webkit-tranform: rotate(40deg);}  }    @-moz-keyframes limb1{      from {-moz-transform: rotate(-5deg);}      to {-moz-tranform: rotate(40deg);}  }    @keyframes limb1{      from { transform: rotate(-5deg);}      to {tranform: rotate(40deg);}  }    @-webkit-keyframes limb2{      from {-webkit-transform: rotate(5deg);}      to {-webkit-tranform: rotate(-10deg);}  }    @-moz-keyframes limb2{      from {-moz-transform: rotate(5deg);}      to {-moz-tranform: rotate(-10deg);}  }    @keyframes limb2{      from {transform: rotate(5deg);}      to {tranform: rotate(-10deg);}  }    @-webkit-keyframes limb3{      from {-webkit-transform: rotate(-5deg);}      to {-webkit-tranform: rotate(10deg);}  }    @-moz-keyframes limb3{      from {-moz-transform: rotate(-5deg);}      to {-moz-tranform: rotate(10deg);}  }    @keyframes limb3{      from {transform: rotate(-5deg);}      to {tranform: rotate(10deg);}  }    @-webkit-keyframes limb4{      from {-webkit-transform: rotate(5deg);}      to {-webkit-tranform: rotate(-40deg);}  }    @-moz-keyframes limb4{      from {-moz-transform: rotate(5deg);}      to {-moz-tranform: rotate(-40deg);}  }    @keyframes limb4{      from {transform: rotate(5deg);}      to {tranform: rotate(-40deg);}  }

Notice that vendor prefixes were used to target specific browsers. To enable this keyframe animation, add the animation property on each of the targeted limbs. This will include the animation name, animation duration, animation timing function, animation delay and animation iteration count. Copy the code below and add it to the CSS code of each limb.

    #front-left {      -webkit-animation: limb1 .5s linear 0 infinite alternate;      -moz-animation: limb1 .5s linear 0 infinite alternate;      -ms-animation: limb1 .5s linear 0 infinite alternate;      -o-animation: limb1 .5s linear 0 infinite alternate;      animation: limb1 .5s linear 0 infinite alternate;  }    #back-left {      -webkit-animation: limb4 .5s linear 0 infinite alternate;      -moz-animation: limb4 .5s linear 0 infinite alternate;      -ms-animation: limb4 .5s linear 0 infinite alternate;      -o-animation: limb4 .5s linear 0 infinite alternate;      animation: limb4 .5s linear 0 infinite alternate;  }    #tail {      -webkit-animation: tail .3s linear 0 infinite alternate;      -moz-animation: tail .3s linear 0 infinite alternate;      -ms-animation: tail .3s linear 0 infinite alternate;      -o-animation: tail .3s linear 0 infinite alternate;      animation: tail .3s linear 0 infinite alternate;  }    #front-right {      -webkit-animation: limb3 .5s linear 0 infinite alternate;      -moz-animation: limb3 .5s linear 0 infinite alternate;      -ms-animation: limb3 .5s linear 0 infinite alternate;      -o-animation: limb3 .5s linear 0 infinite alternate;      animation: limb3 .5s linear 0 infinite alternate;  }    #back-right {      -webkit-animation: limb2 .5s linear 0 infinite alternate;      -moz-animation: limb2 .5s linear 0 infinite alternate;      -ms-animation: limb2 .5s linear 0 infinite alternate;      -o-animation: limb2 .5s linear 0 infinite alternate;      animation: limb2 .5s linear 0 infinite alternate;  }

Next, add the keyframes for the body. For this part, use the translateY property to define a transformation of the element by the specified distance along the Y (vertical axis). This will create a smooth movement on the body of the giraffe vector character.

    @-webkit-keyframes main-body {      from {-webkit-transform: translateY(0px);}      to {-webkit-transform: translateY(3px);}  }    @-moz-keyframes main-body {      from {-moz-transform: translateY(0px);}      to {-moz-transform: translateY(3px);}  }    @keyframes main-body {      from {transform: translateY(0px);}      to {transform: translateY(3px);}  }

Next, make this work by adding the following code to the body element to enable the animation. For this part, add again the necessary animation properties on the body element.

  #main-body {      -webkit-animation: main-body .3s linear 0 infinite alternate;      -moz-animation: main-body .3s linear 0 infinite alternate;      -ms-animation: main-body .3s linear 0 infinite alternate;      -o-animation: main-body .3s linear 0 infinite alternate;      animation: main-body .3s linear 0 infinite alternate;  }

Now that we have the body working, add some animation to the tail of the giraffe vector animation. Copy and paste the code below to your CSS file.

  @-webkit-keyframes tail{      from{-webkit-transform: translateY(0px) rotate(-3deg);}      to{-webkit-transform: translateY(3px) rotate(3deg);}  }    @-moz-keyframes tail{      from{-moz-transform: translateY(0px) rotate(-3deg);}      to{-moz-transform: translateY(3px) rotate(3deg);}  }    @keyframes tail{      from{transform: translateY(0px) rotate(-3deg);}      to{transform: translateY(3px) rotate(3deg);}  }

Then, add the following code to the tail CSS code. This will again add the animation properties code to make the keyframe rules for the tail work. Take note that the rest of the code are the same as the previous codes we added when we placed the tail element on the screen.

  #tail {      -webkit-animation: tail .3s linear 0 infinite alternate;      -moz-animation: tail .3s linear 0 infinite alternate;      -ms-animation: tail .3s linear 0 infinite alternate;      -o-animation: tail .3s linear 0 infinite alternate;      animation: tail .3s linear 0 infinite alternate;  }

Now that we have the limbs, body and tail animation working, focus on the fence animation. Copy the keyframes rule below and add it to your CSS file.

  @-webkit-keyframes fence{      from{left: -10px;}      to{ left: -288px;}  }    @-moz-keyframes fence{      from{left: -10px;}      to{ left: -288px;}  }    @keyframes fence{      from{left: -10px;}      to{left: -288px;}  }

Copy and add the CSS code below to the fence CSS code.

  #fence {      -webkit-animation: fence 3s linear 0 infinite;      -moz-animation: fence 3s linear 0 infinite;      -ms-animation: fence 3s linear 0 infinite;      -o-animation: fence 3s linear 0 infinite;      animation: fence 3s linear 0 infinite;  }

Finally, add the keyframes rules for the clouds element.

  @-webkit-keyframes clouds{      from{left: -15px;}      to{left: -190px;}  }    @-moz-keyframes clouds{      from{left: -15px;}      to{left: -190px;}  }    @keyframes clouds{      from{left: -15px;}      to{left: -190px;}  }

Adding the CSS code below to the previous CSS clouds code will enable the keyframes rule for the cloud elements.

  #clouds {      position: absolute;      left: 0;      top: 55px;      -webkit-animation: clouds 3s linear 0 infinite;      -moz-animation: clouds 3s linear 0 infinite;      -ms-animation: clouds 3s linear 0 infinite;      -o-animation: clouds 3s linear 0 infinite;      animation: clouds 3s linear 0 infinite;  }

Conclusion

Congratulations! You just created an awesome character animation!

Learning CSS3 animation has a lot advantages. It adds more amazing effects on your website which is before can only be done using JavaScript. Hope you enjoyed this tutorial. Let me know what you think about the demo. See you again next time. Cheers!