CSS Animation

[CodePen height=300 show=css href=ogwBdb user=andyhullinger ]

This is a tutorial for a fun way to start using webkit animation and transform.


Before webkit designers would use Flash to execute button animations, or anything that would want to make an object move at precise times. Now with such technology we are able to use CSS to a full benefit with the help of webkit. Now remember webkit is only good for Chrome and Safari.
Now we have our files below show the names of how I will call them out in CSS.
Keep in mind these icons are symbols of project I have done. After this project they will soon become buttons.


Before we start let us set up lets set up the HTML document.By Entering the Document type, opeing the HTML tage, linking your stylesheet.css & titling your webpage.
Your basics

As you see we label the document type open the html
After we need to create a head. This is where you will link your CSS, and title you web page. Mine’s is call Ally’s Demo.
Command Save
Now. Let’s import our images with in the body tag.

<img id="circle" src="images/circle.png" alt="" />

<img id="square" src="images/square.png" alt="" />

<img id="triangle" src="images/triangle.png" alt="" />

<img id="gun" src="images/gun.png" alt="" />

So right after your closing head tag you are going to opening the body tag where the image files will link to the HTML document.
As you’re doing this you can start creating ids for them so we can easily access them when we are on the CSS document.
Command Save.
Now open your HTML and you will see all the images listed in a row.
Cool huh?

Now to create a CSS style sheet. Open a new document.
Title it:

Let’s start with the gun image.

#gun {
position: absolute;
right: 0px;
top: 50px;

I positioned the gun where I would like it to be, lets test to if that works.

Now lets do the same for all the icons. My goal is to have all the icons behind the center of the gun.

#circle, #triangle, #square {
position: absolute;
right: 300px;
top: 95px;

Now that we set up the position you can move forward.

Now time to play with webkit.
Lucky for you have all the calculations done for you.
(Lucky you.)

Let’s start with the gun image.
I want the gun to move back and forward as if it were giving the voluntary movement when you shoot a gun.

@-webkit-keyframes gunMove{
from{right: 0px;}

Above is the code in order to define what my animation will be doing.
Here I am using the key word to and from. In other cases you will notice I will use 0% to 100% it really means the same thing. When you use the percentages you can edit when things happen between the animation.
So I told the code to start from where it originally starts at (505px), then I tell it to move (550px).

Now that I have that set I will have to call it out in the id=gun.
Below all the code you will enter.

-webkit-animation: gunMove .5s 1s infinite alternate;

instead of calling out the keyframe action you will be calling out the “animation” then tell it witch animation you would like t o use. Ours is gunMove.

Above: .5s = duration, 1s = delay, X = iterations.

Instead of iterations I asked it to do infinitely keep going, I also told it to alternate so it snaps back and forward to its original position.
Now test it.

Now that we have the gun moving at a steady speed back and forward. We want one of our icons to shoot out of the gun.

@-webkit-keyframes Shoot{
0% {right: 300px;}
20% {-webkit-transform: rotate(0deg);}
100% {right:1500px;
-webkit-transform: rotate(360deg);}

Once again in this code I am defining the animation and called it Shoot. At zero percent of the animation I am having my icons start at its original place and rotate zero degrees.
Now at one hundred percent I want to move the icon off the canvas. By placing a high number it will lead it off. Now to use the transform rotate instead of zero degrees it will now be three hundred sixty degrees.

Now that we have defined the animation we have to call it out.

#circle {
-webkit-animation: Shoot 3s 2s infinite linear;

Call out the circle id in the brackets call out our animation for it to be used. I want the animation to take 3 seconds long, and delay it 2s going infinitely, making it linear so it moves clearly without any shakiness.

Now that we have the code to define the animation and learning to call it out to the icon we can easily reuse all that code with any other icon.

#triangle {
-webkit-animation: Shoot 3s 3s infinite linear;

I changed the delay, to three seconds instead of two.

Now for the square, a similar process.

#square {
-webkit-animation: squareShoot 3s 4s infinite linear;

I changed the delay, to four seconds instead of two.

@-webkit-keyframes squareShoot{
0%{right: 300px;}
20%{-webkit-transform: rotate(100deg);}
40%{-webkit-transform: rotate(150deg);}
60%{-webkit-transform: rotate(200deg);}
80%{-webkit-transform: rotate(300deg);}
100%{right:1500px;-webkit-transform: rotate(360deg);}

Now test it out.

Great you did it.
Once again the tutorial is for you to learn and understand webkit, call this a simple intro.

Here are some link I choose to learn from.
cssdeck.com Inspiration
css-tricks.com Video Sample
css-tricks.com Code Snippets

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>