Revealing Hidden Elements by CSS Animations

CSSWeb DevelopmentFront End Technology

CSS animations allow us to display hidden elements.

The following example shows how we can reveal elements using CSS animations.

Example

 Live Demo

<!DOCTYPE html>
<html>
<style>
.item {
   position: relative;
   perspective: 1000px;
}
.demo, .hidden-one {
   background: lightgreen;
   box-shadow: 0 5px 12px rgba(0,0,0,0.6);
}
.item:hover .hidden-one{
   animation: yoyo 1.4s backwards ease;
}
.item:hover .demo {
   animation-name: yo 1s ease;
}
.demo {
   position: absolute;
   height: 150px;
   width: 150px;
   background-color: firebrick;
   border-radius: 50%;
   left: 100px;
   top: 50px;
   z-index: 2;
}
.hidden-one {
   background-color: #880;
   border-radius: 3px;
   height: 120px;
   width: 55px;
   position: absolute;
   left: 280px;
   top: 140px;
   opacity: 0;
   transition: opacity 0.8s;
}
@keyframes yoyo {
   0% {
      top: 140px;
      opacity: 0;
      left: 70px;
      z-index: 1;
   }
   50% {
      left: 12px;
      opacity: 1;
      z-index: 2;
      top: 140px;
   }
   100% {
      opacity: 1;
      left: 150px;
      z-index: 3;
   }
}
@keyframes yo {
   0% {
   }
   30% {
      transform: rotate3D(-1,1,0.1,10deg) scale(1.05);
   }
   50% {
      transform: rotate3D(1,-1,0.1,10deg) scale(1.05);
   }
   100% {
   }
}
</style>
<body>
<div class="item">
<div class="hidden-one"></div>
<div class="demo"></div>
</div>
</body>
</html>

Output

This will produce the following result −

raja
Published on 13-Mar-2021 12:35:13
Advertisements