How to create different flip animate effects for blogger posts?

Hi friends in this post I am sharing how to animate blogger posts with various flip effects.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

The various flip effects are
flip in x
flip out x
flip in y
flip out y

How to create flip in X animate effects 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: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
.post {    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    backface-visibility: visible !important;
    animation-name: flipInX;
}

Now view your blogger template . You will get the flip in X effect.

Also check the animated gif below,

How to create flip in Y animate effects 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: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
.post {   -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    backface-visibility: visible !important;
    animation-name: flipInY;
}                                                                   

How to create flip out X animate effects 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: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;

}
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}
@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}
.post { -webkit-animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    animation-name: flipOutX;
    backface-visibility: visible !important;
}

Also check animated gif below,

How to create flip out Y animate effects 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: backwards;
    animation-fill-mode: backwards;

}
@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(1000px) rotateY(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(1000px) rotateY(90deg);
        opacity: 0;
    }
}
@keyframes flipOutY {
    0% {
        transform: perspective(1000px) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: perspective(1000px) rotateY(90deg);
        opacity: 0;
    }
}
.post {  -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    backface-visibility: visible !important;
    animation-name: flipOutY;
}

Also check the animated gif below,

SHARE

About me

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

• 
• 
•