How to create wiggle and wooble animation effect for blogger posts

Hi friends in this posts I am sharing how to create wiggle and wooble animation effects for blogger posts.Also read
how to make animation effect for blogger posts ?
How to swing blogger posts using css3 animation?
How To Bounce Blogger Posts Using Css3

And here we are using both in fill-mode for animate process.

How to create wiggle animation effect for blogger posts?

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 wiggle {
    0% { -webkit-transform: skewX(9deg); }
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(7deg); }
    30% { -webkit-transform: skewX(-6deg); }
    40% { -webkit-transform: skewX(5deg); }
    50% { -webkit-transform: skewX(-4deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); }
    90% { -webkit-transform: skewX(0deg); }
    100% { -webkit-transform: skewX(0deg); }
}
@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }
}
.post {   -webkit-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
-webkit-animation-duration: 0.75s;
    animation-duration: 0.75s; 
}

Also check the animated gif tutorial below,

How to create wobble animation effect for blogger posts?

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: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}
@-webkit-keyframes wobble {
  0% { -webkit-transform: translateX(0%); }
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
  30% { -webkit-transform: translateX(20%) rotate(3deg); }
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
  60% { -webkit-transform: translateX(10%) rotate(2deg); }
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% { -webkit-transform: translateX(0%); }
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}
.post {    -webkit-animation-name: wobble;
    animation-name: wobble;
}

That’s all friends.Now it’s to work from your side.

SHARE

About me

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

• 
• 
•