How to swing blogger posts using css3 animation?

Hi friends in this post I am sharing how to make animation effects for blogger posts.Not only with that if you have little knowledge about how to edit blogger template, then you can use anywhere in blogger(i.e) whole sidebar or particular sidebar,footer and more. Another important thing is you don’t need to use any jquery files.Just some css codes .You have seen a lot of blogger templates releasing with animation effects and now it’s your time friends create animate effects for your blogger templates.And you can also remove the very easily without any causing any problem to blogger templates.

Will animate effect in blogger posts cause seo effect bad?

I have also considered this thing.From my knowledge and searches these will not cause any problems to seo. If you feel if animation effects affects seo , as I already said it’s very easy to remove the code in blogger template.

Where to place the animation code in blogger template?

Login to blogger account .Next goto Template>> click Edit HTML . Click Format template . Click and expand <b:skin></b:skin> .
Now in keyboard press keys CTRL and F at the same time .
Now inside blogger template HTML mode  you can find the search bar.Type in the search field  ]]></b:skin> Paste the below code Just above ]]></b:skin>

.post{ -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; }
@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(15deg); }
    40% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(5deg); }
    80% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
.post { -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;

}

That’s all friends .Now save the template, view blog and enjoy to see the animation . You can change 1s to any, like 5s or 10s or 13s ,according o your wish.
Check animated gif below ,

How to use this code for sidebar and other parts of blogger template?

It’s very easy just find id or class of side bar . For blogger’s default simple blog  template you can copy below code and paste just above ]]></b:skin> .

#sidebar-right-1{ -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; }
@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(15deg); }
    40% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(5deg); }
    80% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
#sidebar-right-1 { -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;

}

SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

• 
• 
•