Задержка анимации CSS и ключевой кадр ⇐ CSS

[Anonymous]

У меня проблема с задержкой анимации в CSS Animation. У меня есть 3 изображения, и я хочу сделать из них слайд-шоу. На иллюстрациях: изменение изображения 1 на изображение 2 занимает 15 секунд, изменение изображения 2 на изображение 3 занимает 15 секунд, а изображение 3 возвращается к изображению 1, это занимает 30 секунд, после первого цикла я хочу, чтобы слайд-шоу закончилось изображение 3, поэтому от изображения 1 до изображения 2 все еще 15 секунд, а от изображения 2 до изображения 3 еще 15 секунд, и когда изображение 3 загружается, нет необходимости возвращаться к изображению 1. Я пробовал этот код, но он дает у меня задержка всех изображений 15 секунд. Это мой код:

Код: Выделить всё

ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}

li {
position: absolute;
opacity:0;
}

li {
animation: xfade 45s  infinite;
}
li:nth-child(2) {
animation-delay:15s;
}
li:nth-child(3) {
animation-delay:30s;
}

@keyframes xfade{
3%{opacity:1}
33% {opacity:1;}
36%{opacity:0}
}

Код: Выделить всё

    [list]
[*]
[img]http://lorempixel.com/500/500/sports[/img]
[*]
[img]http://lorempixel.com/500/500/people[/img]
[*]
[img]http://lorempixel.com/500/500/transport[/img]
[/list]

Я хочу сделать задержку в анимации в соответствии с иллюстрациями выше. Кто-нибудь может помочь мне решить эту проблему? Спасибо заранее.

Подробнее здесь: https://stackoverflow.com/questions/471 ... d-keyframe