Micro animation - zoom + fade in

by ckissi

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Fade-in Zooming Object</title>
  <style>
    .zoom-object {
      opacity: 0;
     /*  transform: scale(1);
      transition: opacity 0.2s, transform 0.2s;
       */
     /*  transition: opacity 0.2s, transform 0.2s; */
      transform: scale(1) rotate(45);
     /*  transition: opacity 1s, transform 1s; */
       transition: opacity 1s cubic-bezier(0.42, 0, 0.58, 1), transform 1s;
      
      animation: zoomAnimation 0.15s forwards;
      animation-delay: 0.7s;
      
      width:50px;
      height:50px;
     /*  background-color:green; */
      display:block;
    }

    .zoom-object.fade-in {
      opacity: 1;
      transform: scale(1.1);
    }
    
    @keyframes zoomAnimation {
      0% {
        opacity: 0;
        transform: scale(1) rotate(0deg);
      }
      70% {
        opacity: 1;
        transform: scale(1.3) ;
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }
  </style>
</head>
<body>

   <div style="padding:10px; border: 1px solid black; display:inline-block; border-radius:15px">
     <img class="zoom-object" style="animation-delay:0.4s" src="https://logo.clearbit.com/google.com">
   </div>
   
        <div style="padding:10px; border: 1px solid black; display:inline-block; border-radius:15px">
     <img class="zoom-object"  src="https://logo.clearbit.com/yahoo.com">
   </div>
   

   
  <div style="padding:10px; border: 1px solid black; display:inline-block; border-radius:15px">
     <img class="zoom-object"   style="animation-delay:0.5s" src="https://logo.clearbit.com/openai.com">
   </div>
   
          <div style="padding:10px; border: 1px solid black; display:inline-block; border-radius:15px">
     <img class="zoom-object"  style="animation-delay:0.6s"  src="https://logo.clearbit.com/google.com">
   </div>
    
   

   

  
  

  <script>
   /*  window.onload = function() {
      var object = document.querySelector('.zoom-object');
      object.classList.add('fade-in');
 ...