Creating our Logo Animation using Keyframes

Learn how to create our logo animation using CSS keyframes

In this tutorial you'll learn how to create a single spiral to the center effect with CSS, used in our logo animation. 

We will use only HTML5 and CSS3 keyframes to achieve this affect, it only works on modern browsers that support keyframes. The tutorial uses the following HTML markup for all but the final example -

 

HTML

<div id="logowrap" >
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

 

Lets first style each div inside the outside wrapper to be a block so we can see what we're working with -

 

CSS

#logowrap{

    display:inline-block;

    position:relative;

}
#logowrap>div{

    display:inline-block;

    position:absolute;

    height:60px;

    width:60px;

}

 

This will give us 3 blocks of the same size within the wrapper. For the purpose of this tutorial we are going to give the blocks each their own background colour so we can see them (We can put anything inside the block later, pictures or any markup we desire).

 

CSS

.one{
    background:yellow;
}
.two{
    background:orange;
}
.three{
    background:blue;
}

 

Now we have finished the basic template for us to lay our keyframes onto. The blocks are all absolutely positioned within their wrapper, any html can be placed inside each div and they can be whichever size we like but for the purpose of the tutorial we have selected 60px squares. We need to use CSS3 keyframes to animate and produce the spiral effect, we will need to rotate and move the blocks in order to create our desired effect. It's important to note that we will be using double rotations in our keyframes, any rotation we provide must also be provided as a negative rotation to the same degree, this stops our blocks from spinning as they move in the circle and keeps them upright while they move around.

 

CSS

/* Chrome, Safari, Opera */
@-webkit-keyframes yellow
{
from {
        -webkit-transform:

                   rotate(0deg)
                   translate(140px)
                   rotate(0deg);
        transform:

                   rotate(0deg)
                   translate(140px)
                   rotate(0deg);
       }
to    {
        -webkit-transform:

                   rotate(360deg)
                   translate(0px)
                   rotate(-360deg);
        transform:

                   rotate(360deg)
                   translate(0px)
                   rotate(-360deg);
        }
}
@keyframes yellow
{
from {
        transform:

                   rotate(0deg)
                   translate(140px)
                   rotate(0deg);
}
to    {
        transform:

                   rotate(360deg)
                   translate(0px)
                   rotate(-360deg);
       }
}


/* Chrome, Safari, Opera */
@-webkit-keyframes blue
{
from {
        -webkit-transform:

                   rotate(120deg)
                   translate(140px)
                   rotate(-120deg);
        transform:

                   rotate(120deg)
                   translate(140px)
                   rotate(-120deg);
        }
to     {
        -webkit-transform:

                   rotate(480deg)
                   translate(0px)
                   rotate(-480deg);
        transform:

                   rotate(480deg)
                   translate(0px)
                   rotate(-480deg);
        }
}
@keyframes blue
{
from {
        transform:

                   rotate(120deg)
                   translate(140px)
                   rotate(-120deg);
}
to    {
        transform: rotate(480deg)
                   translate(0px)
                   rotate(-480deg);
        }
}


/* Chrome, Safari, Opera */
@-webkit-keyframes orange
{
from {
        -webkit-transform:

                   rotate(240deg)
                   translate(140px)
                   rotate(-240deg);
        transform:

                   rotate(240deg)
                   translate(140px)
                   rotate(-240deg);
        }
to     {
        -webkit-transform:

                   rotate(600deg)
                   translate(0px)
                   rotate(-600deg);
        transform:

                   rotate(600deg)
                   translate(0px)
                   rotate(-600deg);
        }
}
@keyframes orange
{
from {
        transform:

                   rotate(240deg)
                   translate(140px)
                   rotate(-240deg);
        }
to     {
        transform:

                   rotate(600deg)
                   translate(0px)
                   rotate(-600deg);
}

 

Now all is required is for us to call the animation from our blocks, we can do so with the following:

 

CSS

.one{
        background:yellow;
        -webkit-animation: yellow 5s 1;
        animation: yellow 5s 1;
}
.two{
        background:orange;
        -webkit-animation: orange 5s 1;
        animation: orange 5s 1;
}
.three{
        background:blue;
        -webkit-animation: blue 5s 1;
        animation: blue 5s 1;

}

 

The above code, all put together should give you this:

 

(Click Result to run again)

Some extra CSS properties were added to the above jsfiddle to better position it inside of jsfiddle, you will probably need to change the positioning yourself, too.

 

You can copy the full CSS from the tutorial below:

 

CSS

#logowrap{

    display:inline-block;

    position:relative;

}
#logowrap>div{

    display:inline-block;

    position:absolute;

    height:60px;

    width:60px;

}

.one{
        background:yellow;
        -webkit-animation: yellow 5s 1;
        animation: yellow 5s 1;
}
.two{
        background:orange;
        -webkit-animation: orange 5s 1;
        animation: orange 5s 1;
}
.three{
        background:blue;
        -webkit-animation: blue 5s 1;
        animation: blue 5s 1;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes yellow
{
from {
        -webkit-transform:

                   rotate(0deg)
                   translate(140px)
                   rotate(0deg);
        transform:

                   rotate(0deg)
                   translate(140px)
                   rotate(0deg);
       }
to    {
        -webkit-transform:

                   rotate(360deg)
                   translate(0px)
                   rotate(-360deg);
        transform:

                   rotate(360deg)
                   translate(0px)
                   rotate(-360deg);
        }
}
@keyframes yellow
{
from {
        transform:

                   rotate(0deg)
                   translate(140px)
                   rotate(0deg);
}
to    {
        transform:

                   rotate(360deg)
                   translate(0px)
                   rotate(-360deg);
       }
}


/* Chrome, Safari, Opera */
@-webkit-keyframes blue
{
from {
        -webkit-transform:

                   rotate(120deg)
                   translate(140px)
                   rotate(-120deg);
        transform:

                   rotate(120deg)
                   translate(140px)
                   rotate(-120deg);
        }
to     {
        -webkit-transform:

                   rotate(480deg)
                   translate(0px)
                   rotate(-480deg);
        transform:

                   rotate(480deg)
                   translate(0px)
                   rotate(-480deg);
        }
}
@keyframes blue
{
from {
        transform:

                   rotate(120deg)
                   translate(140px)
                   rotate(-120deg);
}
to    {
        transform: rotate(480deg)
                   translate(0px)
                   rotate(-480deg);
        }
}


/* Chrome, Safari, Opera */
@-webkit-keyframes orange
{
from {
        -webkit-transform:

                   rotate(240deg)
                   translate(140px)
                   rotate(-240deg);
        transform:

                   rotate(240deg)
                   translate(140px)
                   rotate(-240deg);
        }
to     {
        -webkit-transform:

                   rotate(600deg)
                   translate(0px)
                   rotate(-600deg);
        transform:

                   rotate(600deg)
                   translate(0px)
                   rotate(-600deg);
        }
}
@keyframes orange
{
from {
        transform:

                   rotate(240deg)
                   translate(140px)
                   rotate(-240deg);
        }
to     {
        transform:

                   rotate(600deg)
                   translate(0px)
                   rotate(-600deg);
}

 

As a final example, below is a version of the spiral effect with our logo:

Share this post

No comments.

Leave a comment


You can use the following HTML tags: <a><br><strong><b><em><i><blockquote><pre><code><ul><ol><li><del>