JSFiddle - React, Tailwind, and code Playground

by vaibhav saxena

HTML

<div class='animateGallery animateGallerySec'>
</div>

CSS

@keyframes galleryImages
{
    from{
  
         -webkit-transform:  scale(0.25);
         -moz-transform:  scale(0.25);
         -ms-transform:  scale(0.25);
         -o-transform:  scale(0.25);
         transform:  scale(0.25);
         -webkit-transform: rotateZ(0deg); /* Safari */
          transform: rotateZ(0deg);
        
    }
    to{
        
      -webkit-transform:  scale(1);
         -moz-transform:  scale(1);
         -ms-transform:  scale(1);
         -o-transform:  scale(1);
         transform:  scale(1);
    -webkit-transform: rotateZ(90deg); /* Safari */
    transform: rotateZ(90deg);
        
    }
    
}
@keyframes animateGallerySec{
     0%   { -webkit-transform: rotateY(0deg) scale(0); /* Safari */
            transform: rotateY(0deg) scale(0);
           }
    25%  { -webkit-transform: rotateY(45deg) scale(0.25); /* Safari */
            transform: rotateY(45deg) scale(0.25);
         }
    50%  { -webkit-transform: rotateY(0deg) scale(0.50); /* Safari */
            transform: rotateY(0deg) scale(0.50);
           
         }
    75%  { -webkit-transform: rotateY(-45deg) scale(0.75); /* Safari */
            transform: rotateY(-45deg) scale(0.75);
         }
    100%  {-webkit-transform: rotateY(0deg) scale(1); /* Safari */
            transform: rotateY(0deg) scale(1);}

}

.animateGallery{
    background:#f6f6f6 url(../img/initializing.png) 50% 50% no-repeat;
    background-color:red;
    height: 100px;
    width:100px;
    transition: transform 0.5s linear;
    animation-name:animateGallerySec;
    animation-duration:0.5s;
    -webkit-webkit-animation-name:  animateGallerySec ;
    -moz-webkit-animation-name:animateGallerySec ;
    -ms-webkit-animation-name: animateGallerySec;
    -o-webkit-animation-name: animateGallerySec;
    -webkit-transform: rotateZ(0deg); /* Safari */
    transform: rotateZ(0deg);
    -webkit-webkit-animation-duration:0.5s;
    -moz-webkit-animation-duration:0.5s ;
    -ms-webkit-animation-duration:0.5s ;
   ...