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.
Post a Comment