How to Bounce blogger posts using css3

Hi friends in this post I am sharing how bounce out left and bounce out right using css3.
Also read:
how to make animation effect for blogger posts ?
How to swing blogger posts using css3 animation?
And friends we are going to give all possible animation in blogger posts on techinfoweb.com and so check our blog posts frequently.

It’s also a easy method but we should handle it with care.Because the bounce effects cause the blogger posts to disappear.Don’t worry for this css code have the solution.Just instead of both in fill mode we are going to use backwards which helps the blogger posts to settle in their right place.

How to use Bounce out left animation in 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: backwards;
    animation-fill-mode: backwards;  }
@-webkit-keyframes bounceOutLeft {
    0% {
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
}
@keyframes bounceOutLeft {
    0% {
        transform: translateX(0);
    }
    20% {
        opacity: 1;
        transform: translateX(20px);
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}
.post {  -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;

}

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

How to use Bounce out right animation in 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: backwards;
    animation-fill-mode: backwards;

}
@-webkit-keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
}
@keyframes bounceOutRight {
    0% {
        transform: translateX(0);
    }
    20% {
        opacity: 1;
        transform: translateX(-20px);
    }
    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}
.post {   -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;

}

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




Now you can understand friends why are we using backwards in fill mode instead of both and forwards.Forwards and both will not settle blogger posts in their original position.Backwards have the tendency to settle blogger posts in their original position.

SHARE

About me

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

• 
• 
•