Animated Loading Effect On Sidebar for Blogger

Today I will show how you can add animated transformation effect on the sidebar or even any component of your web site using CSS3. When you have configured the code the element/Sidebar will move upwards emerging from your bottom and have fixed at its actual position.

No demo is needed for this as you can see identical effect on our blog's sidebar. Just in case you were upon another tabs while loading this page, refresh it to find out the effect again.

This CSS3 transformation effect makes your website look additional cool in addition to eye-catching. Below would be the tutorial on how you can add this design hack to your blogger blog.

Configuring this effect

Firstly go to Blog Title → Template → Edit HTML. Press Ctrl + F. Expand <b:skin>....</b:skin> if it is not expanded. Type ]]></b:skin> in search box and press enter key. [As per the new HTML editor]
Add the below given code just below ]]></b:skin> 

<style>
    @-webkit-keyframes transform-translate{
      from{-webkit-transform:translate(0px,1000px)}
      to{-webkit-transform:translate(0px,0px)}
    }
    @-moz-keyframes transform-translate{
      from{-moz-transform:translate(0px,1000px)}
      to{-moz-transform:translate(0px,0px)}
    }
    @-ms-keyframes transform-translate{
      from{-ms-transform:translate(0px,1000px)}
      to{-ms-transform:translate(0px,0px)}
    }
    @-o-keyframes transform-translate{
      from{-o-transform:translate(0px,1000px)}
      to{-o-transform:translate(0px,0px)}
    }
    @keyframes transform-translate{
      from{transform:translate(0px,1000px)}
      to{transform:translate(0px,0px)}
    }
    .sidebar {
      -webkit-animation:transform-translate 4s;
      -moz-animation:transform-translate 4s;
      -ms-animation:transform-translate 4s;
      -o-animation:transform-translate 4s;
      animation:transform-translate 4s;
    }
    </style>

Change .sidebar to another elements name in order to add this effect to any other element. Changes to any other number if you want to increase or decrease the time it takes to move up completely. By default its 4 seconds.
Save the template. You are done now. You and your visitors can now see this amazing effect on your sidebar or the element you want.
If you feel any difficulty please let me know in comments till then Peace, Blessings and Happy Animating.