Bouncing and spinning Text Animation using pure CSS3 keyframe concept with demo

Live Preview        Download Source

Since the day CSS3 was launched, the monopoly of jQuery in the animation field has been reduced. Especially because of the “keyframe” feature of CSS3 which is more or less equivalent to the timeline concept of flash. In today’s animation also I’ve used only the simple concept of “keyframes”.

Basically what I’ve done is, I‘ve taken a div, inside that another div, and inside that a h1 tag. The text which I’m gonna animate is inside the h1 tag. I’ve given a up and down animation effect to the outer most div, a horizontal movement animation to the 2nd div, and a spinning effect to the h1 tag. And all those animations are triggered together. So as a result we’re getting this text bouncing and spinning effect.

Now I’m gonna tell you how the code is working, and trust me it’s really very very simple. Once you understand the code, you will be able to make some new animations too.

Let me 1st tell you about the HTML code. I mean the index.html file.

<div class="divH">
  <div class="divL">
    <h1 class="box">Void Canvas!</h1>
  </div>
</div>

As I’ve told earlier also, there are basically two div tags and one h1 tag basically. The div tag with class=’divH’ is the one which is gonna have a up and down animation. The div with class=’divL’ is going to move horizontally. And, the H1 tag is gonna spin. Now, to know how i’ve animated these three, have a look at the following css code.

I’m gonna describe the css code step by step. 1st I will tell you how to make a horizontal movement effect with keyframes.

/* for horizontal movement */
@-webkit-keyframes move-x {
    0% {
        -webkit-transform: translateX(-100px);
    }
    100% {
        -webkit-transform: translateX(950px);
    }
}

0%, means when the animation starts, the object will be in -100px position, and at 100%, means when the time ends it will be at 950px position. The transform: translateX() function give the object a steady motion. It’s just like creating motion tween in flash.

Now let’s check the code for spinning effect. This effect is given to the h1 tag.

/* for spining */
@-webkit-keyframes spin {
	0%{
        -webkit-transform: rotate(0deg);
        -webkit-animation-timing-function: ease-out;
    }
    30% {
        -webkit-transform: rotate(160deg);
        -webkit-animation-timing-function: ease-out;
    }
    60% {
        -webkit-transform: rotate(340deg);
        -webkit-animation-timing-function: ease-out;
    }
    85% {
        -webkit-transform: rotate(400deg);
        -webkit-animation-timing-function: ease-out;
    }
    94% {
        -webkit-transform: rotate(340deg);
        -webkit-animation-timing-function: ease-out;
    }
    96% {
        -webkit-transform: rotate(370deg);
        -webkit-animation-timing-function: ease-out;
    }
    98% {
        -webkit-transform: rotate(353deg);
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: rotate(360deg);
        -webkit-animation-timing-function: ease-out;
    }
}

This is also similar to the horizontal propagation code. At 0% it will be inclined to 0th degree, means normal position. But at 30% in will be inclined to 160 degree. The transform:rotate() function give it a nice rotating effect. I also have added easing effect to the animation.

Now come to the code of ups and down effect, which is given to the div with class=‘divH’.

/* for up and down */
@-webkit-keyframes move-y {
    0% {
        -webkit-transform: translateY(-400px);
        -webkit-animation-timing-function: ease-in;
    }
    35% {
        -webkit-transform: translateY(-300px);
        -webkit-animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: translateY(-182px);
        -webkit-animation-timing-function: ease-in;
    }
    82% {
        -webkit-transform: translateY(-105px);
        -webkit-animation-timing-function: ease-in;
    }
    92% {
        -webkit-transform: translateY(-60px);
        -webkit-animation-timing-function: ease-in;
    }
    95%{
    	-webkit-transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
    }
    98% {
        -webkit-transform: translateY(-35px);
        -webkit-animation-timing-function: ease-in;
    }
    25%,55%, 75%, 85%,94%,96%,97%,100%{
        -webkit-transform: translateY(-30px);
        -webkit-animation-timing-function: ease-out;
    }
}

Remember one thing, the current position of the div is at the bottom of the page, so it will consider that position as 0px. If you wanna move it up, you’ve give the y coordinate in –ve.

Anyways, let’s discuss this piece of code. Here at 0th time the object will be in -400px position, which means at top. After that you may find a keyframe with 35%, but there is another keyframe at 25% also (line no#76). So from 0% to 25%, the object will come down to -30px from -400px. Similarly from 20% to 35% it will go up again. Then again from 35% to 55% it will come down… like that.

Now it’s the time to integrate all of them and assign the animations to the respective objects. This is done by the following piece of code.

h1 {
    font:normal 56px Arial;
    color:#2E2E2E;
    font-weight: bold;
    margin: 80px 10px 10px 10px;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
    -webkit-animation: spin 4s;
    -moz-animation: spin 4s;
    -o-animation: spin 4s;
}
.divH {
    -webkit-animation: move-y 4s;
    -moz-animation: move-y 4s;
    -o-animation: move-y 4s;
    position:absolute;
    bottom:30px;
}
.divL {
     -webkit-animation: move-x 4.5s ;
     -moz-animation: move-x 4.5s ;
     -o-animation: move-x 4.5s ;

     -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     -o-animation-fill-mode: forwards;
}

I’m assigning the animations by using the “animation: animationName animationTime” property. Now as all these three effects are running together, so a user will see, the text is spinning and bouncing.

That’s all for today. If you have any query, please write it in comments, I will reply as soon as possible.

Live Preview        Download Source

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.