Fondu de 3 images avec déplacement

<style type="text/css">

	@-webkit-keyframes cf4FadeInOut {
	0% {
	    opacity: 0;
	    -webkit-animation-timing-function: ease-in;
	}
	7% {
	    opacity: 1;
	    -webkit-transform: translateX(0px);
	    -webkit-animation-timing-function: ease-out;
	}
	38% {
	    opacity: 1;
	    -webkit-transform: translateX(-120px);
	}
	60% {
	    opacity: 0;
	    -webkit-transform: translateX(-220px);
	}
	100% { opacity: 0 }

	}

	@-moz-keyframes cf4FadeInOut {
	0% {
	    opacity: 0;
	    -moz-animation-timing-function: ease-in;
	}
	7% {
	    opacity: 1;
	    -moz-transform: translateX(0px);
	    -moz-animation-timing-function: ease-out;
	}
	38% {
	    opacity: 1;
	    -moz-transform: translateX(-120px);
	}
	60% {
	    opacity: 0;
	    -moz-transform: translateX(-220px);
	}
	100% { opacity: 0 }
   }
	
	

	@-ms-keyframes cf4FadeInOut {
	0% {
	    opacity: 0;
	    -ms-animation-timing-function: ease-in;
	}
	7% {
	    opacity: 1;
	    -ms-transform: translateX(0px);
	    -ms-animation-timing-function: ease-out;
	}
	38% {
	    opacity: 1;
	    -ms-transform: translateX(-120px);
	}
	60% {
	    opacity: 0;
	    -ms-transform: translateX(-220px);
	}
	100% { opacity: 0 }

	
	}

	@-o-keyframes cf4FadeInOut {
	0% {
	    opacity: 0;
	    -o-animation-timing-function: ease-in;
	}
	7% {
	    opacity: 1;
	    -o-transform: translateX(0px);
	    -o-animation-timing-function: ease-out;
	}
	38% {
	    opacity: 1;
	    -o-transform: translateX(-120px);
	}
	60% {
	    opacity: 0;
	    -o-transform: translateX(-220px);
	}
	100% { opacity: 0 }
	}

	@keyframes cf4FadeInOut {
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	7% {
	    opacity: 1;
	    transform: translateX(0px);
	    animation-timing-function: ease-out;
	}
	38% {
	    opacity: 1;
	    transform: translateX(-120px);
	}
	60% {
	    opacity: 0;
	    transform: translateX(-220px);
	}
	100% { opacity: 0 }
	}

	#vign {
	/*position:relative;*/

		height:125px;
		width:183px;
		float:left;
		margin-right:20px;
		margin-top:15px;
	}
		#cf4a {
		position:relative;
		overflow:hidden;
		height:100px;
		width:183px;


	}
		.cf4_title {

		margin-top:3px;
		font-size:14px;
	
	font-weight:600;
	font-family: 'HelveticaNeueLightCondRegular';
	color:#FFF;
	text-transform: uppercase;
	float:right;
	text-align:right;
	}
	
	
	#cf4a img {
		position:absolute;
		left:0;
	}

	#cf4a img {
		-webkit-animation-name: cf4FadeInOut;
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-duration: 15s;

		-moz-animation-name: cf4FadeInOut;
		-moz-animation-timing-function: linear;
		-moz-animation-iteration-count: infinite;
		-moz-animation-duration: 15s;

		-ms-animation-name: cf4FadeInOut;
		-ms-animation-timing-function: linear;
		-ms-animation-iteration-count: infinite;
		-ms-animation-duration: 15s;

		-o-animation-name: cf4FadeInOut;
		-o-animation-timing-function: linear;
		-o-animation-iteration-count: infinite;
		-o-animation-duration: 15s;

		animation-name: cf4FadeInOut;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-duration: 15s;
		
	}
    #cf4a img:nth-of-type(1) {
		-webkit-animation-delay: 10s;
		-moz-animation-delay: 10s;
		-ms-animation-delay: 10s;
		-o-animation-delay: 10s;
		animation-delay: 10s;
		
    }
    #cf4a img:nth-of-type(2) {
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
		-ms-animation-delay: 5s;
		-o-animation-delay: 5s;
		animation-delay: 5s;
    }
    #cf4a img:nth-of-type(3) {
		-webkit-animation-delay: 0s;
		-moz-animation-delay: 0s;
		-ms-animation-delay: 0s;
		-o-animation-delay: 0s;
		animation-delay: 0s;
    }
</style>