BitmapCake!

I just wanted to write this blog post to get your attention to the logo of my blog :)



If you take your mouse pointer over the logo above, you will see a really simple animation I have added to it. Why don't you try it now? :) I said “simple” because it's very easy to do and you only need to add a few new lines to your style sheet. I will show you how to do it.

Also note, I'm going to show you how this animation can be included in a blogspot blog because I know there are hundreds of similar articles written about CSS3 animations and probably many of those articles will already have about this animation too. So there's no point of repeating the same thing, instead I will show you how to add this in your blogspot blog to add some value to this article. Don't worry, the blogspot part is only a addition to this article. You can use the styles in your website too.

Let's Start.

01. First login to your blogger account and go to “Templates” option.
02. Click on the “Edit HTML” button.


03. This will open the source of your template to edit. Press ctrl + F key and search for

        <style type='text/css'>






04. When you find it, insert the following css rules under that line in your template source.

@keyframes shake-logo{
16.65% {
    transform: translateX(8px);
}
33.3% {
    transform: translateX(-6px);
}
49.95% {
    transform: translateX(4px);
}
66.6% {
    transform: translateX(-2px);
}
83.25% {
    transform: translateX(1px);
}
100% {
    transform: translateX(0px);
}
}

.logo:hover, .logo:focus, .logo:active {
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-name: shake-logo;
    animation-timing-function: ease-in-out;
}




here “.logo” is the class name I've applied to my logo. Remember to add the class “logo” to your logo first. Otherwise this won't work.

I think I don't need to explain the code?

Here the main thing is in the “@keyframes shake-logo“ line. We first define an animation using the CSS keyframes rule, and give it a name as “shake-logo”.

After that we have assigned the animation to our .logo class using the animation-name: shake-logo; property.  Other properties are self explanatory.

So, that's it! Now open your website/blog and see!

Actually what I have shown you here is only the basic application of this animation. So probably this won't work in webkit browsers like Chrome / Safari or Opera ;)

Read the following articles from W3schools and learn how you can overcome this too.

http://www.w3schools.com/css/css3_animations.asp
http://www.w3schools.com/cssref/css3_pr_animation.asp

Hope you enjoyed my article. Do you think I've missed anything? Please feel free to let me know in a comment below.