Shake your logo a little with a simple CSS3 animation!

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.

2 comments :

  1. This post has many impressive images which can be used for many purposes. thank you so much for sharing it. Design Company

    ReplyDelete
  2. At COEPD we are glad to announce Web Designing Internship Programs (Self sponsored) for professionals who want to have hands on experience. Associations with IT Companies, at present we are providing this program in COEPD Hyderabad premises. We anticipate finest web designing technology covering Photoshop, HTML, CSS, HTML5, CSS3, JavaScript, Boot Strap, and JQuery. We tutor participants to be solution providers and creative engineers. This internship is intelligently dedicated to our enthusiastic and passionate participants mostly acknowledging and appreciating the fact that they are on the path of making a career in Web Designing. This internship is designed to fortify that in addition to gaining the vital theoretical knowledge, the readers gain sufficient hands-on practice and practical know-how to master the essence of Web Designing profession. More than a training institute, COEPD today stands differentiated as a mission to help you "Build your dream career" - COEPD way.

    http://www.coepd.com/WebDesigning-Internships.html

    ReplyDelete