onecric_h5/static/css/animation.scss

.fadeInTop, .fadeInBtm, .fadeInRight, .fadeInLeft {
  opacity: 1;
}
.animation.fadeInTop {
  animation: fadeInTop 1s ease 1;
  opacity: 1;
  transition: opacity 1s ease;
}
.animation.fadeInBtm {
  animation: fadeInBtm 1s ease 1;
  opacity: 1;
  transition: opacity 1s ease;
}
.animation.fadeInRight {
  animation: fadeInRight 1s ease 1;
  opacity: 1;
  transition: opacity 1s ease;
}

.animation.fadeInLeft {
  animation: fadeInLeft 1s ease 1;
  opacity: 1;
  transition: opacity 1s ease;
}

@keyframes fadeInRight {
  0% {
    transform: translateX(-30%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    transform: translateX(30%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes fadeInTop {
  0% {
    transform: translateY(30%);
  }

  100% {
    transform: translateY(0);
  }
}
@keyframes fadeInBtm {
  0% {
    transform: translateY(-30%);
  }

  100% {
    transform: translateY(0);
  }
}

 .like-box {
    width: 100%;
    height: 1rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
 }
 
 .parentImg {
   width: 35px;
   height: 35px;
   display: inline-block;
   position: absolute;
   top: -0.15rem;
   right: 8%;
   animation: vertical-animation 1.6s linear forwards;
   -webkit-animation: vertical-animation 1.6s linear forwards;
 }
 
 @-webkit-keyframes vertical-animation {
     0% {
         transform: translateY(0px);
         opacity: 1
     }
 
     100% {
         transform: translateY(-300px);
         opacity: 0
     }
 }
 
 @keyframes vertical-animation {
     0% {
         transform: translateY(0px);
         opacity: 1
     }
 
     100% {
         transform: translateY(-300px);
         opacity: 0
     }
 }
 
 .parentImg0 img,
 .parentImg1 img {
     width: 35px;
     height: 35px;
     display: inline-block;
     animation: hor-animation 1.4s linear forwards;
     -webkit-animation: hor-animation 1.4s linear forwards;
 }
 
 @-webkit-keyframes hor-animation {
     0% {
         transform: translateX(0px);
         transform: scale(0);
     }
 
     10% {
         transform: scale(1);
     }
 
     25% {
         transform: translateX(10px);
     }
 
     50% {
         transform: translateX(0px);
     }
 
     75% {
         transform: translateX(-10px);
     }
 
     100% {
         transform: translateX(0px);
     }
 }
 
 .parentImg2 img,
 .parentImg3 img {
     width: 33px;
     height: 33px;
     animation: hor-animation1 1.4s linear forwards;
     -webkit-animation: hor-animation1 1.4s linear forwards;
 }
 
 @-webkit-keyframes hor-animation1 {
     0% {
         transform: translateX(0px);
         transform: scale(0);
     }
 
     10% {
         transform: scale(1);
     }
 
     33% {
         transform: translateX(15px);
     }
 
     66% {
         transform: translateX(10px);
     }
 
     100% {
         transform: translateX(0px);
     }
 }
 
 .parentImg4 img,
 .parentImg5 img {
     width: 30px;
     height: 30px;
     animation: hor-animation2 1.4s linear forwards;
     -webkit-animation: hor-animation2 1.4s linear forwards;
 }
 
 @-webkit-keyframes hor-animation2 {
     0% {
         transform: translateX(0px);
         transform: scale(0);
     }
 
     10% {
         transform: scale(1);
     }
 
     33% {
         transform: translateX(-5px);
     }
 
     66% {
         transform: translateX(0px);
     }
 
     100% {
         transform: translateX(6px);
     }
 }
 
 .parentImg6 img,
 .parentImg7 img {
     width: 28px;
     height: 28px;
     animation: hor-animation3 1.2s linear forwards;
     -webkit-animation: hor-animation3 1.2s linear forwards;
 }
 
 @-webkit-keyframes hor-animation3 {
     0% {
         transform: translateX(0px);
         transform: scale(0);
     }
 
     10% {
         transform: scale(1);
     }
 
     33% {
         transform: translateX(20px);
     }
 
     66% {
         transform: translateX(10px);
     }
 
     100% {
         transform: translateX(0px);
     }
 }
 
 .parentImg8 img,
 .parentImg9 img {
     width: 24px;
     height: 24px;
     animation: hor-animation4 1.2s linear forwards;
     -webkit-animation: hor-animation4 1.2s linear forwards;
 }
 
 @-webkit-keyframes hor-animation4 {
     0% {
         transform: translateX(0px);
         transform: scale(0);
     }
 
     10% {
         transform: scale(1);
     }
 
     33% {
         transform: translateX(-10px);
     }
 
     66% {
         transform: translateX(-15px);
     }
 
     100% {
         transform: translateX(-8px);
     }
 }