.fade-in {
    animation: fadeIn 7s linear infinite;
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1;}
}

.typing {
    animation: typing 2s steps(107);
    overflow-y: hidden;
   
}
 @keyframes typing {
    0% { width: 0%;}
    100% {width: 100%; }
 }

 .blinking {
    animation: blinking 1ms infinite;
 }

 @keyframes blinking {
  


    0% { opacity: 1;}
   
    50% { opacity: 0;}
   
    100% { opacity: 1;}

 }
 .blinkingx {
    animation: blinkingx 1s infinite;
 }

 @keyframes blinkingx {
   0% { opacity: 1;}
   10% { opacity: 1;}
   20% { opacity: 1;}
   30% { opacity: 1;}
   40% { opacity: 1;}
   50% { opacity: 0;}
   60% { opacity: 1;}
   70% { opacity: 1;}
   80% { opacity: 1;}
   90% { opacity: 1;}
   100% { opacity: 1;}
 }

 .zoom-in {
    animation: zoomIn 2s;
 }

 @keyframes zoomIn {
    0% { transform:  scale(0); }
    100% { transform: scale(1);}
 }

 .bounce {
    animation: bounce 1s linear infinite;
 }

 @keyframes bounce {
    0% { transform: translateX(-100%);}
    70% { transform: translateY(-20%);}
    100% { transform: translateY(0);}
 }

 .spin {
    animation: spin 7s infinite;
 }

 @keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform:  rotate(360deg);}
 }

 .flip {
    animation: flip 10s infinite ;
 }

 @keyframes flip {
    0% { transform: rotateY(0deg);}
    100% { transform:  rotateY(360deg);}
 }
 .shake {
    animation: shake 2s linear infinite ;
 }

 @keyframes shake {
    0% { transform: translateX(0);}
    20% { transform:  translateX(-20px);}
    40% { transform:  translateX(20px);}
    60% { transform:  translateX(-20px);}
    80% { transform:  translateX(20px);}
    100% { transform:  translateX(0);}
    
 }