/**********************   Deplacement droite  *********************** */ .deplacementDroite{ 	display:inline-block; 	-webkit-animation-name: deplacementDroite; 	-webkit-animation-duration:2s; 	-webkit-animation-timing-function:ease-in; 	-webkit-animation-iteration-count: 4; 	-webkit-animation-direction: alternate; 	-webkit-animation-fill-mode: forwards; 	 	-moz-animation-name: deplacementDroite; 	-moz-animation-duration:2s; 	-moz-animation-timing-function:ease-in; 	-moz-animation-iteration-count: 4; 	-moz-animation-direction: alternate; 	-moz-animation-fill-mode: forwards; 	 	animation-name: deplacementDroite; 	animation-duration:2s; 	animation-timing-function:ease-in; 	animation-iteration-count: 4; 	animation-direction: alternate; 	animation-fill-mode: forwards; 	color:#FFF; 	 }   @-webkit-keyframes deplacementDroite{ 	0%{         -webkit-transform:translate(0px); 		-webkit-box-shadow:3px 3px #000; 		background-color:#40213E; /*mauve foncé*/ 		opacity:10; 	}	 	50%{ 	   -webkit-box-shadow:5px 5px #999;       	background-color:#7F417D;/*mauve pâle*/ 		opacity:5; 	}          100%{         -webkit-transform:translate(1000px); 		-webkit-box-shadow: 7px 7px #FFF; 		background-color:#E575E0; /*violet*/ 		opacity: 0;   	} }  @-moz-keyframes deplacementDroite{ 	0%{         -moz-transform:translate(0px); 		-moz-box-shadow:3px 3px #000; 		background-color:#40213E; /*mauve foncé*/ 		opacity:10; 	}	 	50%{ 	   -moz-box-shadow:5px 5px #999;       	background-color:#7F417D;/*mauve pâle*/ 		opacity:5; 	}          100%{         -moz-transform:translate(1000px); 		-moz-box-shadow: 7px 7px #FFF; 		background-color:#E575E0; /*violet*/ 		opacity: 0;   	} }  @keyframes deplacementDroite{ 	0%{         transform:translate(0px); 		box-shadow:3px 3px #000; 		background-color:#40213E; /*mauve foncé*/ 		opacity:10; 	}	 	50%{ 	   box-shadow:5px 5px #999;       	background-color:#7F417D;/*mauve pâle*/ 		opacity:5; 	}          100%{         transform:translate(1000px); 		box-shadow: 7px 7px #FFF; 		background-color:#E575E0; /*violet*/ 		opacity: 0;   	} }   /**********************   Tomber Bas  *********************** */ 	  .tomberBas{ 	display:inline-block; 	-webkit-animation-name: tomberBas; 	-webkit-animation-duration:1s; 	-webkit-animation-iteration-count: 1; 	-webkit-animation-fill-mode: forwards;  	 	-moz-animation-name: tomberBas; 	-moz-animation-duration:1s; 	-moz-animation-iteration-count: 1; 	-moz-animation-fill-mode: forwards; 	 	animation-name: tomberBas; 	animation-duration:1s; 	animation-iteration-count: 1; 	animation-fill-mode: forwards; }  @-webkit-keyframes tomberBas{    0% {  	   -webkit-transform-origin:left; 	   -webkit-transform: rotate(-90deg); 	   -webkit-animation-timing-function: (.94,.26,.88,.4); 	   font-size:20px; 	   color:#2106FF;    } 	 	60% {  	   -webkit-transform: rotate(60deg); 	   -webkit-animation-timing-function:(.94,.26,.88,.4); 	   font-size:28px; 	   color:#0657FF;     } 	 	80% {  	   -webkit-transform: rotate(75deg); 	   -webkit-animation-timing-function:(.94,.26,.88,.4); 	   font-size:35px; 	   color:#017DE8;     } 	 	50%, 70% ,100% {  	   -webkit-transform-origin:left; 	   -webkit-transform: rotate(90deg); 	   -webkit-animation-timing-function:(.94,.26,.88,.4); 	   font-size:40px; 	   color:#06C1FF;     } }  @-moz-keyframes tomberBas{    0% {  	   -moz-transform-origin:left; 	   -moz-transform: rotate(-90deg); 	   -moz-animation-timing-function: (.94,.26,.88,.4); 	   font-size:20px; 	   color:#2106FF;    } 	 	60% {  	   -moz-transform: rotate(60deg); 	   -moz-animation-timing-function:(.94,.26,.88,.4); 	   font-size:28px; 	   color:#0657FF;     } 	 	80% {  	   -moz-transform: rotate(75deg); 	   -moz-animation-timing-function:(.94,.26,.88,.4); 	   font-size:35px; 	   color:#017DE8;     } 	 	50%, 70% ,100% {  	   -moz-transform-origin:left; 	   -moz-transform: rotate(90deg); 	   -moz-animation-timing-function:(.94,.26,.88,.4); 	   font-size:40px; 	   color:#06C1FF;     } }  @keyframes tomberBas{    0% {  	   transform-origin:left; 	   transform: rotate(-90deg); 	   animation-timing-function: (.94,.26,.88,.4); 	   font-size:20px; 	   color:#2106FF;    } 	 	60% {  	   transform: rotate(60deg); 	   animation-timing-function:(.94,.26,.88,.4); 	   font-size:28px; 	   color:#0657FF;     } 	 	80% {  	   transform: rotate(75deg); 	   animation-timing-function:(.94,.26,.88,.4); 	   font-size:35px; 	   color:#017DE8;     } 	 	50%, 70% ,100% {  		transform-origin:left; 	   	transform: rotate(90deg); 	   	animation-timing-function:(.94,.26,.88,.4); 	   	font-size:40px; 	   	color:#06C1FF;     } }  /**********************   Battement de Coeur   *********************** */  .battementCoeur { 	display:inline-block;   	-webkit-animation-name: battementCoeur; 	-webkit-animation-duration:1s; 	-webkit-animation-delay: 1s; 	-webkit-animation-iteration-count: infinite; 	-webkit-animation-direction: alternate; 	 	-moz-animation-name: battementCoeur; 	-moz-animation-duration:1s; 	-moz-animation-delay: 1s; 	-moz-animation-iteration-count: infinite; 	-moz-animation-direction: alternate; 	 	animation-name: battementCoeur; 	animation-duration:1s; 	animation-delay: 1s; 	animation-iteration-count: infinite; 	animation-direction: alternate; }  @-webkit-keyframes battementCoeur { 	  0%, 100% { 				-webkit-transform: scale(1); 				color:#006; 				font-size:16px; 	 }  	  40% { 		-webkit-transform: scale(1.5); 		color:#0F9; 		font-size:40px; 	 }  }     @-moz-keyframes battementCoeur { 	  0%, 100% { 				-moz-transform: scale(1); 				color:#006; 				font-size:16px; 		}  	  40% { 		-moz-transform: scale(1.5); 		color:#0F9; 		font-size:40px; 		} }    @keyframes battementCoeur { 	  0%, 100% { 				transform: scale(1); 				color:#006; 				font-size:16px; 		}  	  40% { 	  transform: scale(1.5); 		color:#0F9; 		font-size:40px; 		} }  /**********************   Balance  *********************** */ .balance { 		display:inline-block; 		-webkit-animation-name: balance; 		-webkit-animation-duration: 3s; 		-webkit-animation-iteration-count: 4; 		-webkit-animation-fill-mode: forwards; 		 		-moz-animation-name: balance; 		-moz-animation-duration: 3s; 		-moz-animation-iteration-count: 4; 		-moz-animation-fill-mode: forwards; 		 		animation-name: balance; 		animation-duration: 3s; 		animation-iteration-count: 4; 		animation-fill-mode: forwards; }  @-webkit-keyframes balance {   20% { 		-webkit-transform-origin: top center; 		-webkit-transform: rotate(20deg); 		-webkit-box-shadow: 8px 13px 8px #FFEF1E; 	 }    40% { 		-webkit-transform-origin: top center; 		-webkit-transform: rotate(-15deg); 		-webkit-box-shadow: -8px 13px 8px #E8321B; 		   	}    60% { 		-webkit-transform-origin: top center; 		-webkit-transform: rotate(10deg); 		-webkit-box-shadow: 8px 13px 8px #FFEF1E; 		   	}    80% { 		-webkit-transform-origin: top center; 		-webkit-transform: rotate(-10deg); 		-webkit-box-shadow: -8px 13px 8px #E8321B; 		   	}    100% { 		-webkit-transform-origin: top center; 		-webkit-transform: rotate(0deg); 		-webkit-box-shadow: 0px 14px 8px #FF872B; 	 	 } }  @-moz-keyframes balance {   20% { 		-moz-transform-origin: top center; 		-moz-transform: rotate(20deg); 		-moz-box-shadow: 8px 13px 8px #FFEF1E; 	 }    40% { 		-moz-transform-origin: top center; 		-moz-transform: rotate(-15deg); 		-moz-box-shadow: -8px 13px 8px #E8321B; 		   	}    60% { 		-moz-transform-origin: top center; 		-moz-transform: rotate(10deg); 		-moz-box-shadow: 8px 13px 8px #FFEF1E; 		   	}    80% { 		-moz-transform-origin: top center; 		-moz-transform: rotate(-10deg); 		-moz-box-shadow: -8px 13px 8px #E8321B; 		   	}    100% { 		-moz-transform-origin: top center; 		-moz-transform: rotate(0deg); 		-moz-box-shadow: 0px 14px 8px #FF872B; 	 	 } }  @keyframes balance {   20% { 		transform-origin: top center; 		transform: rotate(20deg); 		box-shadow: 8px 13px 8px #FFEF1E; 	 }    40% { 		transform-origin: top center; 		transform: rotate(-15deg); 		box-shadow: -8px 13px 8px #E8321B; 		   	}    60% { 		transform-origin: top center; 		transform: rotate(10deg); 		box-shadow: 8px 13px 8px #FFEF1E; 		   	}    80% { 		transform-origin: top center; 		transform: rotate(-10deg); 		box-shadow: -8px 13px 8px #E8321B; 	   	}    100% { 		transform-origin: top center; 		transform: rotate(0deg); 		box-shadow: 0px 14px 8px #FF872B; 		 	 } }    /**********************   Pivote  *********************** */  .pivote { 		display:inline-block; 		-webkit-animation-name: pivote; 		-webkit-animation-duration:1s; 		-webkit-animation-delay: 1s; 		-webkit-animation-iteration-count: infinite; 		-webkit-animation-direction: alternate; 		 		-moz-animation-name: pivote; 		-moz-animation-duration:1s; 		-moz-animation-delay: 1s; 		-moz-animation-iteration-count: infinite; 		-moz-animation-direction: alternate; 		 		animation-name: pivote; 		animation-duration:1s; 		animation-delay: 1s; 		animation-iteration-count: infinite; 		animation-direction: alternate; } @-webkit-keyframes pivote { 	0% { 		-webkit-transform: perspective(400px) rotateY(0); 		-webkit-animation-timing-function: ease-out; 		color:#000; /* à l'endroit*/ 	} 	40% { 		-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); 		-webkit-animation-timing-function: ease-out; 		 color:red; /* à l'envers*/ 	} 	50% { 		-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 		-webkit-animation-timing-function: ease-in; 		color:red; /* à l'envers*/ 	} 	80% { 		-webkit-transform: perspective(400px) rotateY(360deg) scale(.95); 		-webkit-animation-timing-function: ease-in; 		color:#000; /* à l'endroit*/ 	} 	100% { 		-webkit-transform: perspective(400px) scale(1); 		-webkit-animation-timing-function: ease-in; 		color:#000; /* à l'endroit*/ 	} } 	 @-moz-keyframes pivote { 	0% { 		-moz-transform: perspective(400px) rotateY(0); 		-moz-animation-timing-function: ease-out; 		color:#000; /* à l'endroit*/ 	} 	40% { 		-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); 		-moz-animation-timing-function: ease-out; 		 color:red; /* à l'envers*/ 	} 	50% { 		-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 		-moz-animation-timing-function: ease-in; 		color:red; /* à l'envers*/ 	} 	80% { 		-moz-transform: perspective(400px) rotateY(360deg) scale(.95); 		-moz-animation-timing-function: ease-in; 		color:#000; /* à l'endroit*/ 	} 	100% { 		-moz-transform: perspective(400px) scale(1); 		-moz-animation-timing-function: ease-in; 		color:#000; /* à l'endroit*/ 	} }  @keyframes pivote { 	0% { 		transform: perspective(400px) rotateY(0); 		animation-timing-function: ease-out; 		color:#000; /* à l'endroit*/ 	} 	40% { 		transform: perspective(400px) translateZ(150px) rotateY(170deg); 		animation-timing-function: ease-out; 		 color:red; /* à l'envers*/ 	} 	50% { 		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 		animation-timing-function: ease-in; 		color:red; /* à l'envers*/ 	} 	80% { 		transform: perspective(400px) rotateY(360deg) scale(.95); 		animation-timing-function: ease-in; 		color:#000; /* à l'endroit*/ 	} 	100% { 		transform: perspective(400px) scale(1); 		animation-timing-function: ease-in; 		color:#000; /* à l'endroit*/ 	} }