Categories
CSS Web development

CSS Animation- Hinge Effect

CSS animation is a method of animation certain HTML elements without having to use the processor and memory like in the case of JavaScript.

CSS Hinge Effect

I’ll prepare some posts with simple samples of animations to show the possible ways to animate the CSS because the learning is easier when you can see live examples that I am talking about.

Let’s start today with the hinge effect.

*animation opened in the Safari browser.
To see the live output of the animation click here.

To create the hinge animation effect with CSS follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step 1.

Add HTML

Create the HTML elements which you want to “hinge“:

<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

Style the elements, starting from the background:

body {
  height: 100vh;
  background: #263463;
  font-size: 60px;
}

Set the #text position:

#text {
  position: relative;
  left: 40%;
  top: 50;
  color: #fff;
  text-shadow: 2px 2px 4px #000000;
  
}

Style the div .I:

.I {
  position: absolute;
  top: 150px;
  left: -150px;
  animation: hinge 2s ease;
  animation-fill-mode: forwards;
  
}
  
.I:after {
  position: absolute;
  content:"";
  border-radius: 50%;
  width: 200px;
  height: 200px;
  left:-90px;
  top: -60px;
  background-image: radial-gradient( #c3faf3 50%, #81e3d6, #31b5a3);
  z-index:-1;
  opacity:0.7;
  animation: fade-out-down 2s ease;
  
}

Note: To .I, I added the animation hinge, and the animation duration will be 2s, and also animation-fill-mode I set as forwards which means the animation won’t be repeated. The same properties I’ll add to the rest of the elements.

To read more about the CSS Animation properties click here.

.P {
  position: absolute;
  top: 200px;
  left: -50px;
  animation: hinge 2s ease;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}
.P:after {
  position: absolute;
  content:"";
  border-radius: 50%;
  width: 200px;
  height: 200px;
  left:-30px;
  top: -60px;
  background-image: radial-gradient( #cffac3 50%, #98e084, #77e359);
  z-index:-1;
  opacity:0.7;
  animation: fade-out-down 2s ease;
  animation-delay: 2s;
  
}
.W {
  position: absolute;
  top: 150px;
  left: 150px;
  animation: hinge 4s ease;
  animation-fill-mode: forwards;
}
.W:after {
  position: absolute;
  content:"";
  border-radius: 50%;
  width: 200px;
  height: 200px;
  left:-20px;
  top: -60px;
  background-image: radial-gradient( #ebf0bd 50%, #e9f57f, #d3e05a);
  z-index:-1;
  opacity:0.7;
  animation: fade-out-down 2s ease;
  animation-delay: 4s;
}
.C {
  position: absolute;
  top: 200px;
  left: 350px; 
  animation: hinge 3s ease;
  animation-fill-mode: forwards;
}
.C:after {
  position: absolute;
  content:"";
  border-radius: 50%;
  width: 200px;
  height: 200px;
  left:-20px;
  top: -60px;
  background-image: radial-gradient( #e9a4eb 50%, #e171e3, #e152e3);
  z-index:-1;
  opacity:0.7;
  animation: fade-out-down 2s ease;
  animation-delay: 2s;
   }

Note: I added the animation-delay property to animate the elements, not at the same time.

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

The Fade-Out-Down Effect:

@keyframes fade-out-down {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

To see the live output of the animation go to: lenastanley.com.

Enjoy coding!

Leave a Reply