css3 sync multiple element animation

HTML

<div class="small xfade">
    <span>fgdfh</span>
    <span>dfhdfh</span>
    <span>djjj</span>
    <span>vmy</span>
</div>

<div class="big xfade">
    <span>yju</span>
    <span>ghkl</span>
    <span>gkgty</span>
    <span>gtkgh</span>
</div>

CSS

html, body {
	height: 100%;
	overflow: hidden;
	width: 100%;
}

@-webkit-keyframes xfade {
	0%   { opacity:1; }
	17%  { opacity:1; }
	25%  { opacity:0; }
	92%  { opacity:0; }
	100% { opacity:1; }
}

@-moz-keyframes xfade {
	0%   { opacity:1; }
	17%  { opacity:1; }
	25%  { opacity:0; }
	92%  { opacity:0; }
	100% { opacity:1; }
}

@-o-keyframes xfade {
	0%   { opacity:1; }
	17%  { opacity:1; }
	25%  { opacity:0; }
	92%  { opacity:0; }
	100% { opacity:1; }
}

@keyframes xfade {
	0%   { opacity:1; }
	17%  { opacity:1; }
	25%  { opacity:0; }
	92%  { opacity:0; }
	100% { opacity:1; }
}

.small {
	height: 50px;
	margin: 10%;
}

.xfade {
	display: block;
}

.xfade.small {
	position: relative;
}

.xfade.big {
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.xfade span {
	-webkit-animation-name: xfade;
	-webkit-animation-timing-function: steps(1);
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 4s;

	-moz-animation-name: xfade;
	-moz-animation-timing-function: steps(1);;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 4s;

	-o-animation-name: xfade;
	-o-animation-timing-function: steps(1);
	-o-animation-iteration-count: infinite;
	-o-animation-duration: 4s;

	animation-name: xfade;
	animation-timing-function: steps(1);
	animation-iteration-count: infinite;
	animation-duration: 4s;

    
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.xfade span:nth-of-type(1) {
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	-o-animation-delay: 3s;
	animation-delay: 1s;
}
.xfade.big span:nth-of-type(1) {
	background: #330000;
}
.xfade.small span:nth-of-type(1) {
	background: #003300;
}

.xfade span:nth-of-type(2) {
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	-o-animation-delay: 2s;
	animation-delay: 2s;
}
.xfade.big span:nth-of-type(2) {
	background: #003300;
}
.xfade.small span:nth-of-type(2) {
	background: #000033;
}

.xfade span:nth-of-type(3)...