Webkit Animation

Creating a Webkit Animation is really fun and you can make cool ones with just HTML and CSS.

Let’s say you want to make a button that comes out of nowhere, looks like a cannon ball, spins, and then turns into a button to begin your awesome game. No problem.

First we start with the HTML.

<button type="button" class="new" name="button">Let's Play!</button>

Next we add some CSS to determine how the button will look after the animation

.new{
   margin-top:12%;
   margin-left:15%;
   height:125px;
   width:125px;
   box-shadow: 0 0 0 4px lightgrey inset;
   border: 3px maroon solid;
   padding:2px;
   background-color: black;
   font-size: 1.4rem;
   color:grey;
}

Then we make magic happen…

To make an animation happen, we add

-webkit-animation: growSpin 3000ms 1;

to our “new” class,

The first parameter is the name of our animation (it can be anything). The second is how long the animation will take. The third is how many times the animation will occur (it can be a specific number or infinite).

Now we have

.new{
   margin-top:12%;
   margin-left:15%;
   height:125px;
   width:125px;
   box-shadow: 0 0 0 4px lightgrey inset;
   border: 3px maroon solid;
   padding:2px;
   background-color: black;
   font-size: 1.4rem;
   color:grey;
   -webkit-animation: growSpin 3000ms 1;
}

Next we need to specify what will happen during the animation

Below your “new” class add:

@-webkit-keyframes growSpin{
}

Then within the brackets, add what you want to happen in increments between 0% and 100%. 0% is at the start of animation and 100% is at the close.

• To change the shape of the button to round, we will change the border radius.
• To make the button look like it is popping out of nowhere, we will change the scale.
• To make the button spin and move across the page, we will translate the object across the X, Y, and Z axes.
• To change the look of the button to all black in the beginning (so it looks like a cannonball), we will change text color, background color, and remove the border.

@-webkit-keyframes growSpin{
0% {-webkit-transform: scale(.5) translateX(700%) ; background-color: black; border-radius: 100%; border:none; color:black;}
30%{ -webkit-transform: scale(.7) translateY(-250%) translateX(100%) ; background-color: black; border-radius: 100%; border:none; color:black;}
60%{ -webkit-transform: scale(.7) rotateZ(360deg);}
100% { -webkit-transform: scale(.99) rotateZ(-360deg); color:grey;}
}

Now put it all together and, as promised, you have a button that comes out of nowhere, looks like a cannon ball, spins, and then turns into a button to begin your awesome game. 🙂

HTML

<button type="button" class="new" name="button">Let's Play!</button>

CSS

.new{
   margin-top:12%;
   margin-left:15%;
   height:125px;
   width:125px;
   box-shadow: 0 0 0 4px lightgrey inset;
   border: 3px maroon solid;
   padding:2px;
   background-color: black;
   font-size: 1.4rem;
   color:grey;
   -webkit-animation: growSpin 3000ms 1;
}
   /* cannon ball animation */
   @-webkit-keyframes growSpin{
   0% {-webkit-transform: scale(.5) translateX(700%) ; background-color: black; border-radius: 100%; border:none; color:black;}
   30%{ -webkit-transform: scale(.7) translateY(-250%) translateX(100%) ; background-color: black; border-radius: 100%; border:none; color:black;}
   60%{ -webkit-transform: scale(.7) rotateZ(360deg);}
   100% { -webkit-transform: scale(.99) rotateZ(-360deg); color:grey;}
}