Blog

I have been looking into webkit CSS3 lately as I had to produce some animation for a iPhone game, I could have used jQuery but decided to learn a new skill and use the powerful CSS3 options that are available with webkit (chrome and safari).

Im going to dive straight into setting this up, Im going use CSS3 webkit animations to give a logo I designed some flare.

View this demo in Chrome or Safari, wont work in firefox or Internet Explorer…

Demo of the animated logo

So the above animation is based on the logo below that im sure you have seen on my home page.

The HTML

So to create a simple orb this is the HTML we are going to use, obviously you will have it all set up inside a containing div but im just keeping it simple.

1
2
3

    <span class="orb">
    <span class="glowBlue"> </span>
    </span>

The CSS

Time to give the orb some basic styling, as we are using CSS3 I thought why not use the gradients as well. To help you out with the gradients heres a great link to a CSS3 gradient generator, they have a few presets for you.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

div#holder span.orb {
    width: 230px;
    height: 230px;
    position: absolute;
    display: block;
    -webkit-border-radius: 200px;
    background: -webkit-gradient(radial, center center, 0, center center, 100, from(rgba(84,134,235,.6)), to(rgba(255,255,255,.7))); /*adds a nice gradient to the bubble*/
}
 
 
div#holder span.glowBlue {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    -webkit-border-radius: 200px;
    }

The CSS for the animations

Looks really difficult to understand but its really simple just is very time consuming. I am going to create two animations, one which gives a nice pulse to the outer edge of the orb, this is using the webkit-box-shadow, all you want to do is expand and contract. So with all animations you need a starting point and end point, these are called using from and to inside of that you can have as many or as little % as you want, as im only using it to expand and contact I can use just three. You will notice that the to and from are the same -webkit-box-shadow: 0 0 30px #215bd2 this is because I want to create a seamless animation and it to be continuos.

1
2
3
4
5

@-webkit-keyframes bluePulse /*Give your animation a name mine is 'bluePulse'*/ {
    from { -webkit-box-shadow: 0 0 30px #215bd2;} /*Starting point for your animation*/
    50% { -webkit-box-shadow: 0 0 80px #5486eb; }
    to { -webkit-box-shadow: 0 0 30px #215bd2;} /*End point for your animation this will be the same as the start so it loops seemlessly*/
    }

So thats the glow on the outside of the orb sorted. Now I want to animate the actual orb, simply by scaling it. The size of the orb is set in the CSS, div#holder span.orb so using scale .4 it will grow to .8 shrink to .3 grow to .5 and then shrink back to .4 which is the same as the start to make it seamless. I have also changed the opacity as it grows. You can add some easing to it, I have used ease-in-out, you could use linear, ease-in or ease-out

1
2
3
4
5
6
7
8
9
10
11
12
13

/*animates the scale of the orb*/
    @-webkit-keyframes orb { /*Give your animation a name mine is 'orb'*/
    from {
     -webkit-transform: scale(.4); opacity: .5; -webkit-animation-timing-function: ease-in-out; }
    25% {
    -webkit-transform: scale(.8); opacity: 1; -webkit-animation-timing-function: ease-in-out; }
    50% {
    -webkit-transform: scale(.3); opacity: 1; -webkit-animation-timing-function: ease-in-out; }
    75% {
    -webkit-transform: scale(.5); opacity: .5; -webkit-animation-timing-function: ease-in-out; }
    to {
    -webkit-transform: scale(.4); opacity: .5; -webkit-animation-timing-function: ease-in-out; } /*same at the bluePulse to get the animation seamless use the same styles here at the start*/
    }

Thats the time consuming bit done, now onto applying it to the styles and get it working.
You want to add this bit of CSS to div#holder span.orb

1
2
3

    -webkit-animation-name: orb; /*call the name of animation*/
    -webkit-animation-duration: 8s; /*Length of animation*/
    -webkit-animation-iteration-count: infinite; /*loop count*/

Add this bit to div#holder span.glowBlue

1
2
3

    -webkit-animation-name: bluePulse; /*call the name of animation*/
    -webkit-animation-duration: 20s; /*Length of animation*/
    -webkit-animation-iteration-count: infinite; /*loop count*/

I have written these out full length so you can see whats happening.

But you can shorten them to this, stops little mistakes creeping in.

1

-webkit-animation: orb 8s infinite;

1

-webkit-animation: bluePulse 20s infinite;

Go and have fun with what you can do with webkit, just dont look at it in Firefox or IE, doesn’t look pretty. Below is a link to a good resource for helping you out with css3.

Webkit CSS3 cheat sheet