как последовательно постепенно появляться и исчезать изображения одно за другим - очень хлопотно

Всем привет.. Я сильно застрял в этом и не могу этого сделать. По ссылке ниже вы можете увидеть 3 группы изображений, которые появляются и исчезают.



Я хочу установить их переход последовательно друг за другом, сначала будут загружаться все изображения, затем должно измениться первое изображение в первой группе, после этого изменится изображение во второй группе, затем должно измениться изображение в третьей группе, затем снова изображение сначала изменится, затем второе, а затем третье.



http://graphixideus.com/slider/

Ниже приведены HTML и CSS, которые я использую на случай, если они вам понадобятся.

 #crossfade > img {


width: 100%;


height: 100%;


position: absolute;


top: 0px;


left: 0px;


color: transparent;


opacity: 0;


z-index: 0;


-webkit-backface-visibility: hidden;


-webkit-animation: imageAnimation 15s linear infinite 0s;


-moz-animation: imageAnimation 15s linear infinite 0s;


-o-animation: imageAnimation 15s linear infinite 0s;


-ms-animation: imageAnimation 15s linear infinite 0s;


animation: imageAnimation 15s linear infinite 0s;


}


#crossfade > img:nth-child(2) {


-webkit-animation-delay: 3s;


-moz-animation-delay: 3s;


-o-animation-delay: 3s;


-ms-animation-delay: 3s;


animation-delay: 3s;


}


#crossfade > img:nth-child(3) {


-webkit-animation-delay: 6s;


-moz-animation-delay: 6s;


-o-animation-delay: 6s;


-ms-animation-delay: 6s;


animation-delay: 6s;


}


#crossfade > img:nth-child(4) {


-webkit-animation-delay: 9s;


-moz-animation-delay: 9s;


-o-animation-delay: 9s;


-ms-animation-delay: 9s;


animation-delay: 9s;


}


#crossfade > img:nth-child(5) {


-webkit-animation-delay: 12s;


-moz-animation-delay: 12s;


-o-animation-delay: 12s;


-ms-animation-delay: 12s;


animation-delay: 12s;


}


@-webkit-keyframes imageAnimation {


0% { opacity: 0;


-webkit-animation-timing-function: ease-in; }


8% { opacity: 1;


-webkit-animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}


@-moz-keyframes imageAnimation {


0% { opacity: 0;


-moz-animation-timing-function: ease-in; }


8% { opacity: 1;


-moz-animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}


@-o-keyframes imageAnimation {


0% { opacity: 0;


-o-animation-timing-function: ease-in; }


8% { opacity: 1;


-o-animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}


@-ms-keyframes imageAnimation {


0% { opacity: 0;


-ms-animation-timing-function: ease-in; }


8% { opacity: 1;


-ms-animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}


@keyframes imageAnimation {


0% { opacity: 0;


animation-timing-function: ease-in; }


8% { opacity: 1;


animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}


#crossfade1 > img {


width: 100%;


height: 100%;


position: absolute;


top: 0px;


left: 0px;


color: transparent;


opacity: 0;


z-index: 0;


-webkit-backface-visibility: hidden;


-webkit-animation: imageAnimation 20s linear infinite 0s;


-moz-animation: imageAnimation 20s linear infinite 0s;


-o-animation: imageAnimation 20s linear infinite 0s;


-ms-animation: imageAnimation 20s linear infinite 0s;


animation: imageAnimation 20s linear infinite 0s;


}


#crossfade1 > img:nth-child(2) {


-webkit-animation-delay: 4s;


-moz-animation-delay: 4s;


-o-animation-delay: 4s;


-ms-animation-delay: 4s;


animation-delay: 4s;


}


#crossfade1 > img:nth-child(3) {


-webkit-animation-delay: 8s;


-moz-animation-delay: 8s;


-o-animation-delay: 8s;


-ms-animation-delay: 8s;


animation-delay: 8s;


}


#crossfade1 > img:nth-child(4) {


-webkit-animation-delay: 12s;


-moz-animation-delay: 12s;


-o-animation-delay: 12s;


-ms-animation-delay: 12s;


animation-delay: 12s;


}


#crossfade1 > img:nth-child(5) {


-webkit-animation-delay: 16s;


-moz-animation-delay: 16s;


-o-animation-delay: 16s;


-ms-animation-delay: 16s;


animation-delay: 16s;


}


@-webkit-keyframes imageAnimation {


0% { opacity: 0;


-webkit-animation-timing-function: ease-in; }


8% { opacity: 1;


-webkit-animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}


@-moz-keyframes imageAnimation {


0% { opacity: 0;


-moz-animation-timing-function: ease-in; }


8% { opacity: 1;


-moz-animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}


@-o-keyframes imageAnimation {


0% { opacity: 0;


-o-animation-timing-function: ease-in; }


8% { opacity: 1;


-o-animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}


@-ms-keyframes imageAnimation {


0% { opacity: 0;


-ms-animation-timing-function: ease-in; }


8% { opacity: 1;


-ms-animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}


@keyframes imageAnimation {


0% { opacity: 0;


animation-timing-function: ease-in; }


8% { opacity: 1;


animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}


#crossfade2 > img {


width: 100%;


height: 100%;


position: absolute;


top: 0px;


left: 0px;


color: transparent;


opacity: 0;


z-index: 0;


-webkit-backface-visibility: hidden;


-webkit-animation: imageAnimation 25s linear infinite 0s;


-moz-animation: imageAnimation 25s linear infinite 0s;


-o-animation: imageAnimation 25s linear infinite 0s;


-ms-animation: imageAnimation 25s linear infinite 0s;


animation: imageAnimation 25s linear infinite 0s;


}


#crossfade2 > img:nth-child(2) {


-webkit-animation-delay: 5s;


-moz-animation-delay: 5s;


-o-animation-delay: 5s;


-ms-animation-delay: 5s;


animation-delay: 5s;


}


#crossfade2 > img:nth-child(3) {


-webkit-animation-delay: 10s;


-moz-animation-delay: 10s;


-o-animation-delay: 10s;


-ms-animation-delay: 10s;


animation-delay: 10s;


}


#crossfade2 > img:nth-child(4) {


-webkit-animation-delay: 15s;


-moz-animation-delay: 15s;


-o-animation-delay: 15s;


-ms-animation-delay: 15s;


animation-delay: 15s;


}


#crossfade2 > img:nth-child(5) {


-webkit-animation-delay: 20s;


-moz-animation-delay: 20s;


-o-animation-delay: 20s;


-ms-animation-delay: 20s;


animation-delay: 20s;


}


@-webkit-keyframes imageAnimation {


0% { opacity: 0;


-webkit-animation-timing-function: ease-in; }


8% { opacity: 1;


-webkit-animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}


@-moz-keyframes imageAnimation {


0% { opacity: 0;


-moz-animation-timing-function: ease-in; }


8% { opacity: 1;


-moz-animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}


@-o-keyframes imageAnimation {


0% { opacity: 0;


-o-animation-timing-function: ease-in; }


8% { opacity: 1;


-o-animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}


@-ms-keyframes imageAnimation {


0% { opacity: 0;


-ms-animation-timing-function: ease-in; }


8% { opacity: 1;


-ms-animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}


@keyframes imageAnimation {


0% { opacity: 0;


animation-timing-function: ease-in; }


8% { opacity: 1;


animation-timing-function: ease-out; }


17% { opacity: 1 }


25% { opacity: 0 }


100% { opacity: 0 }


}

Код (CSS):