Hinge Animation using CSS

Hinge Animation using CSS

In this tutorial we will see how to create Hinge Animation using CSS. This hinge animation is created using transform property of CSS.

Table of Contents

HTML Code

HTML Code is given below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box">Sale: 50%</div>
</body>
</html>

CSS Code

CSS Code is given below.

body{
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif; 
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}
.box{
  background-color: #22438c;
  color: #fff;
  padding: 10px;
  font-size: 40px;
  transform-origin: top left;
  animation: hinge 4s ease-in-out forwards;
}
@keyframes hinge{
   15%{
    transform: rotate(120deg);
  }
  30%{
    transform: rotate(60deg);
  }
  40%{
    transform: rotate(110deg);
  }
  50%{
    transform: rotate(70deg);
  }
  60%{
    transform: rotate(100deg);
  }
  70%{
    transform: rotate(80deg);
  }
    80%{
    transform: rotate(95deg);
  }
    90%{
    transform: rotate(85deg);
  }
    100%{
    transform: rotate(90deg);
  }
}

Video Tutorial

Watch video tutorial on how to create Hinge Animation using CSS.

Tags