» Unlabelled » Shake your logo a little with a simple CSS3 animation!

Shake your logo a little with a simple CSS3 animation!

Posted by Nimeshka Srimal Friday, October 17, 2014 8 comments
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.
Categories : icon
Pin It

Related Post:



8 comments :

  1. Abell GilbertMay 22, 2015 at 12:06 PM

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

    ReplyDelete
  2. Coepd BA TrainingsSeptember 14, 2018 at 10:09 PM

    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
  3. umaMay 30, 2020 at 12:29 AM

    We are glad to announce that in COEPD we have introduced Digital Marketing Internship Programs (Self sponsored) for professionals who want to have hands on experience. In affiliation with IT companies we are providing this program. Presently, this program is available in COEPD Hyderabad premises. We deem in real time practical Internship program. We guide participants through real-time project examples and assignments, giving credits for Real-Time Internship. Our digital marketing certified mentors tutor our learning people through modules of Digital Marketing in an exhaustive manner. This internship is intelligently dedicated to our avid and passionate participants predominantly acknowledging and appreciating the fact that they are on the path of making a career in Digital Marketing discipline. We upskill and master the nitty-gritty of the Digital Marketing 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/DMInternship.html

    ReplyDelete
  4. sailaja NJune 1, 2020 at 11:29 PM

    We are glad to announce that in COEPD we have introduced Digital Marketing Internship Programs (Self sponsored) for professionals who want to have hands on experience. In affiliation with IT companies we are providing this program. Presently, this program is available in COEPD Hyderabad premises. We deem in real time practical Internship program. We guide participants through real-time project examples and assignments, giving credits for Real-Time Internship. Our digital marketing certified mentors tutor our learning people through modules of Digital Marketing in an exhaustive manner. This internship is intelligently dedicated to our avid and passionate participants predominantly acknowledging and appreciating the fact that they are on the path of making a career in Digital Marketing discipline. We upskill and master the nitty-gritty of the Digital Marketing 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/DMInternship.html

    ReplyDelete
  5. sathishJune 3, 2020 at 12:13 AM

    We are glad to announce that in COEPD we have introduced Digital Marketing Internship Programs (Self sponsored) for professionals who want to have hands on experience. In affiliation with IT companies we are providing this program. Presently, this program is available in COEPD Hyderabad premises. We deem in real time practical Internship program. We guide participants through real-time project examples and assignments, giving credits for Real-Time Internship. Our digital marketing certified mentors tutor our learning people through modules of Digital Marketing in an exhaustive manner. This internship is intelligently dedicated to our avid and passionate participants predominantly acknowledging and appreciating the fact that they are on the path of making a career in Digital Marketing discipline. We upskill and master the nitty-gritty of the Digital Marketing 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/DMInternship.html

    ReplyDelete
  6. chaithra vJune 4, 2020 at 10:25 PM

    We are glad to announce that in COEPD we have introduced Digital Marketing Internship Programs (Self sponsored) for professionals who want to have hands on experience. In affiliation with IT companies we are providing this program. Presently, this program is available in COEPD Hyderabad premises. We deem in real time practical Internship program. We guide participants through real-time project examples and assignments, giving credits for Real-Time Internship. Our digital marketing certified mentors tutor our learning people through modules of Digital Marketing in an exhaustive manner. This internship is intelligently dedicated to our avid and passionate participants predominantly acknowledging and appreciating the fact that they are on the path of making a career in Digital Marketing discipline. We upskill and master the nitty-gritty of the Digital Marketing 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/DMInternship.html

    ReplyDelete
  7. umaJune 5, 2020 at 11:13 PM

    We are glad to announce that in COEPD we have introduced Digital Marketing Internship Programs (Self sponsored) for professionals who want to have hands on experience. In affiliation with IT companies we are providing this program. Presently, this program is available in COEPD Hyderabad premises. We deem in real time practical Internship program. We guide participants through real-time project examples and assignments, giving credits for Real-Time Internship. Our digital marketing certified mentors tutor our learning people through modules of Digital Marketing in an exhaustive manner. This internship is intelligently dedicated to our avid and passionate participants predominantly acknowledging and appreciating the fact that they are on the path of making a career in Digital Marketing discipline. We upskill and master the nitty-gritty of the Digital Marketing 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/DMInternship.html

    ReplyDelete
  8. sailaja NJune 7, 2020 at 10:55 PM

    We are glad to announce that in COEPD we have introduced Digital Marketing Internship Programs (Self sponsored) for professionals who want to have hands on experience. In affiliation with IT companies we are providing this program. Presently, this program is available in COEPD Hyderabad premises. We deem in real time practical Internship program. We guide participants through real-time project examples and assignments, giving credits for Real-Time Internship. Our digital marketing certified mentors tutor our learning people through modules of Digital Marketing in an exhaustive manner. This internship is intelligently dedicated to our avid and passionate participants predominantly acknowledging and appreciating the fact that they are on the path of making a career in Digital Marketing discipline. We upskill and master the nitty-gritty of the Digital Marketing 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/DMInternship.html

    ReplyDelete

Copyright © 2012 BitmapCake! . All rights reserved.