Revealing Hidden Elements by CSS Animations

CSS Web Development Front End Technology

CSS animations allow us to display hidden elements. The elements can be set hidden using the opacity. Set the opacity to the value 0 and the element will hide. To display it, set the transition property with the opacity and also set the transition duration to make it look like fade in effect.

Set the container

The container div is set. Within that, set two child divs −

<div class="item">
   <div class="hidden-one"></div>
   <div class="demo"></div>
</div>

Hide a child div

A child div is set with the opacity value 0 to make it invisible when the page loads. The transition is set here for the same opacity property −

.hidden-one {
   background-color: #880;
   border-radius: 3px;
   height: 120px;
   width: 55px;
   position: absolute;
   left: 280px;
   top: 140px;
   opacity: 0;
   transition: opacity 0.8s;
}

Display the other div

The other div is displayed in the form of a circle;

.demo {
   position: absolute;
   height: 150px;
   width: 150px;
   background-color: firebrick;
   border-radius: 50%;
   left: 100px;
   top: 50px;
   z-index: 2;
}

Hover the div to display the hidden div

When the circle div is hovered, the hidden div is displayed with animation using the animation property. The animation name is yo whereas the duration 1 seconds.

The animation property is also used for the animation −

animation-name: yo 1s ease;

Above, the animation shorthand property is set −

animation-name is set yo.
animation duration is set 1s i.e., 1 seconds
animation-timing-function sets the speed curve of the animation. The ease has a slow start then it fastens and ends slowly

Here it is −

.item:hover .demo {
   animation-name: yo 1s ease;
}

Animation Rule

The animation rule is set with @keyframes −

@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% {
   }
}

Example

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

<!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>

AmitDiwan

Updated on: 26-Dec-2023

573 Views

Kickstart Your Career

Get certified by completing the course

Get Started