CSS के साथ Flip In Y एनिमेशन प्रभाव

CSS के साथ Flip In Y एनिमेशन प्रभाव लागू करने के लिए, आप निम्न कोड आज़मा सकते हैं:

उदाहरण

<html>   <head>     <style>       .animated {         background-image: url(/css/images/logo.png);         background-repeat: no-repeat;         background-position: left top;         padding-top:95px;         margin-bottom:60px;         -webkit-animation-duration: 1s;         animation-duration: 1s;         -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;         }       }       .flipInY {         -webkit-backface-visibility: visible !important;         -webkit-animation-name: flipInY;         backface-visibility: visible !important;         animation-name: flipInY;       }     </style>   </head>   <body>     <div id = "animated-example" class = "animated flipInY"></div>     <button onclick = "myFunction()">Reload page</button>     <script>       function myFunction() {         location.reload();       }     </script>   </body> </html>