How to create flip animation effect for blogger posts?

Hi friends in this post I am sharing how to create simple flip animation effect for blogger posts.Flip is also one of the frequently used animation effect.And here we are using only css3 code and not any jquery files.You have to  just use the below code and if you don’t need you can easily remove from the blogger template.
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
How To Create Wiggle And Wooble 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 flip {
    0% {
        -webkit-transform: perspective(1000px) rotateY(0);
        -webkit-animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(1000px) translateZ(1px) rotateY(170deg);
        -webkit-animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(1000px) translateZ(1px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(1000px) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: perspective(1000px) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
}
@keyframes flip {
    0% {
        transform: perspective(1000px) rotateY(0);
        animation-timing-function: ease-out;
    }
    40% {
        transform: perspective(1000px) translateZ(1px) rotateY(170deg);
        animation-timing-function: ease-out;
    }
    50% {
        transform: perspective(1000px) translateZ(1px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(1000px) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: perspective(1000px) scale(1);
        animation-timing-function: ease-in;
    }
}
.post {     -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flip;
    backface-visibility: visible !important;
    animation-name: flip;
}

That’s all friends save template and enjoy to see the flip animation in blogger posts. If you want to extend and decrease flip size change 1000px with other values to see changes.Also note that lower value e.g.100px means huge flip size and higher value means e.g. 1000px means medium flip size.
Also check the animated gif below,





We are also going to to share ,
flipinX
flipinY
flipoutX
flipoutY
in further posts.

SHARE

About me

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

• 
• 
•