@keyframes inverse {
    0% {
        transform: scaleX(-1);
    }
    100% {
        transform: scaleX(1);
    }
}


@keyframes glisse {
    0% {
	    opacity: 0;
        transform: translateX(-200%);
    }
    100% {
	    opacity: 1;
        transform: translateX(0);
    }
}

@keyframes glisselent {
    0% {
	    opacity: 0;
        transform: translateX(-200%);
    }
    100% {
	    opacity: 1;
        transform: translateX(0);
    }
}

@keyframes glissedroite {
    0% {
	    opacity: 0;
        transform: translateX(200%);
    }
    100% {
	    opacity: 1;
        transform: translateX(0);
    }
}


@keyframes rotation {
   0% {
      opacity : 0;
     transform: scale(0) rotate(-360deg);
    }
    100% {
	    opacity : 1;
       transform: scale(1) rotate( 360deg);    
    }
   }

@keyframes phone {
   0% {
     transform: rotate(0);
    }
    20% {
       transform: rotate( -90deg);    
    }
     30% {
       transform: rotate( 0);    
    }
   100% {
       transform: rotate( 0);    
    }

      }
   
@keyframes retreci {
   from {
      opacity : 0;
     transform: scale(2);
    }
    to {
	     opacity : 1; 
       transform: scale(1);   
    }
   }
 
 @keyframes agrandi {
   from {
      opacity : 0;
     transform: scale(.1);
    }
    to {
	     opacity : 1; 
       transform: scale(1);   
    }
   }
   
 @keyframes ouverture {
   0% {
      opacity : 0;
     transform: scaleY(.1) scaleX(.1);
    }
    20% {
      opacity : 1;
     transform: scaleY(.2) scaleX(1);
    }
    40% {
       transform: scaleY(1.05) scaleX(1);   
    }
    60% {
       transform: scaleY(.95) scaleX(1);   
    }
     100% {
       transform: scaleY(1) scaleX(1);   
    }
   }
   
 @keyframes retour {
   0% {
      transform: translateX(50px);
    }
    100%{
	     transform: translateX(0);
    }
   }

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
				
    transform: translateY(0);
    opacity: 1;
  }
	40% {
    transform: translateY(5px);
  }
	60% {
    transform: translateY(10px);
  }
}

@keyframes remonte {
	0% {				
    transform: translateY(500px);
    opacity: 0;
  }
	100% {
    transform: translateY(0);
     opacity: 1;
  }
}


.phone {
	display: inline-block;
	font-size: 2rem;
	transform-origin: center;
	animation: 2s ease-out infinite phone;	
	}

.ouverture {
	transform-origin: top;
	animation: 1s ease-out ouverture;	
	}

.inverse {
	animation: .8s ease-out inverse;	
	}


.glisse {
	animation: .8s ease-out glisse;	
	}
	
.glisse-droite {
	animation: .7s ease-out glissedroite;	
	}
	
.glisse-lent {
	animation: 1.2s ease-in glisselent;	
	}

.retreci {
	animation: 1s ease-out retreci;
}

.agrandi {
	animation: .4s ease-out agrandi;
}

.rotation {
	animation: 1s ease-out rotation;
}

.retour{
	animation: 1s ease-out  retour;	
}

.bounce {
	animation: 1s ease  bounce;	
}

.remonte {
	animation: 1s ease  remonte;
}