CSS - Hinge Effect

An Element can turn over or cause to turn over with a sudden quick movement.
@keyframes hinge {
   0% { 
      transform: rotate(0); 
      transform-origin: top left; 
      animation-timing-function: ease-in-out; 
   }
   20%, 60% { 
      transform: rotate(80deg); 
      transform-origin: top left; 
      animation-timing-function: ease-in-out; 
   }
   40% { 
      transform: rotate(60deg); 
      transform-origin: top left; 
      animation-timing-function: ease-in-out; 
   }
   80% { 
      transform: rotate(60deg) translateY(0); 
      opacity: 1; 
      transform-origin: top left; 
      animation-timing-function: ease-in-out; 
   }
   100% { 
      transform: translateY(700px); 
      opacity: 0; 
   } 
} 
Transform − Transform applies to 2d and 3d transformation to an element.
Transform − Transform applies to 2d and 3d transformation to an element.
Opacity − Opacity applies to an element to make translucence.
Opacity − Opacity applies to an element to make translucence.
<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 hinge {
            0% {
               -webkit-transform: rotate(0);
               -webkit-transform-origin: top left; 
               -webkit-animation-timing-function: ease-in-out;
            }
            20%, 60% {
               -webkit-transform: rotate(80deg); 
               -webkit-transform-origin: top left; 
               -webkit-animation-timing-function: ease-in-out;
            }
            40% {
               -webkit-transform: rotate(60deg);
               -webkit-transform-origin: top left;
               -webkit-animation-timing-function: ease-in-out;
            }
            80% {
               -webkit-transform: rotate(60deg) translateY(0);
               opacity: 1; 
               -webkit-transform-origin: top left; 
               -webkit-animation-timing-function: ease-in-out;
            }
            100% {
               -webkit-transform: translateY(700px);
               opacity: 0;
            }
         }
      
         @keyframes hinge {
            0% { 
               transform: rotate(0); 
               transform-origin: top left; 
               animation-timing-function: ease-in-out; 
            }
            20%, 60% { 
               transform: rotate(80deg); 
               transform-origin: top left; 
               animation-timing-function: ease-in-out; 
            }
            40% { 
               transform: rotate(60deg); 
               transform-origin: top left; 
               animation-timing-function: ease-in-out;
            }
            80% { 
               transform: rotate(60deg) translateY(0); 
               opacity: 1; 
               transform-origin: top left; 
               animation-timing-function: ease-in-out; 
            }
            100% { 
               transform: translateY(700px); 
               opacity: 0; 
            }
         }
         
         .hinge {
            -webkit-animation-name: hinge;
            animation-name: hinge;
         }
      </style>
   </head>

   <body>
   
      <div id = "animated-example" class = "animated hinge"></div>
      <button onclick = "myFunction()">Reload page</button>
      
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
      
   </body>
</html>
It will produce the following result −


 Academic Tutorials
 Big Data & Analytics 
 Computer Programming 
 Computer Science 
 Databases 
 DevOps 
 Digital Marketing 
 Engineering Tutorials 
 Exams Syllabus 
 Famous Monuments 
 GATE Exams Tutorials
 Latest Technologies 
 Machine Learning 
 Mainframe Development 
 Management Tutorials 
 Mathematics Tutorials
 Microsoft Technologies 
 Misc tutorials 
 Mobile Development 
 Java Technologies 
 Python Technologies 
 SAP Tutorials 
Programming Scripts 
 Selected Reading 
 Software Quality 
 Soft Skills 
 Telecom Tutorials 
 UPSC IAS Exams 
 Web Development 
 Sports Tutorials 
 XML Technologies 
 Multi-Language
 Interview Questions


 Academic Tutorials
 Big Data & Analytics 
 Computer Programming 
 Computer Science 
 Databases 
 DevOps 
 Digital Marketing 
 Engineering Tutorials 
 Exams Syllabus 
 Famous Monuments 
 GATE Exams Tutorials
 Latest Technologies 
 Machine Learning 
 Mainframe Development 
 Management Tutorials 
 Mathematics Tutorials
 Microsoft Technologies 
 Misc tutorials 
 Mobile Development 
 Java Technologies 
 Python Technologies 
 SAP Tutorials 
Programming Scripts 
 Selected Reading 
 Software Quality 
 Soft Skills 
 Telecom Tutorials 
 UPSC IAS Exams 
 Web Development 
 Sports Tutorials 
 XML Technologies 
 Multi-Language
 Interview Questions
Selected Reading
UPSC IAS Exams Notes
Developer's Best Practices
Questions and Answers
Effective Resume Writing
HR Interview Questions
Computer Glossary
Who is Who
 Print
 Add Notes
 Bookmark this page