CSS Animation- Hinge Effect

Demo:

To create the CSS Hinge Effect Animation follow the steps below:

Add HTML
Add CSS
Add CSS Animation

Step 1.

Add HTML

<div id="text">
  <div class="I">I</div>
  <div class="P">PLAY</div>
  <div class="W">WITH</div>
  <div class="C">CODE</div>
</div>

Step 2.

Add CSS

Set the colour and the position of the background and elements:

body {
  height:100vh;
  display: flex;
  justify-content:center;
  align-items: center;
  background-color: #263463;
  font-size: 40px;
  overflow: hidden;
}

#text {
  position: relative;
  left:-100px;
  color: #fff;
  text-shadow: 2px 2px 4px #000000;  
}

Style the letters:

.I {
  position: absolute;
  top: 0;
  left: -100px;
  animation: hinge 2s ease;
  animation-fill-mode: forwards;  
}
  
.P {
  position: absolute;
  top: 0;
  left: -50px;
  animation: hinge 2s ease;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.W {
  position: absolute;
  top: 0;
  left: 80px;
  animation: hinge 4s ease;
  animation-fill-mode: forwards;
}

.C {
  position: absolute;
  top: 0px;
  left: 220px; 
  animation: hinge 3s ease;
  animation-fill-mode: forwards;
}

Note: I’ve added the animation hinge, and also the animation-fill-mode sets forwards which means the animation won’t be repeated.

Step 3.

Add CSS Animation

The hinge effect:

@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(500px); opacity: 0; }
}

Enjoy coding!

Share this: