Ключевые кадры в анимации

Доброго времени суток.
Не могу вникнуть в ключевые кадры анимации, а точнее, например делаю слайдер, в нем 3 картинки, задаю анимации 15 секунд скорости, и infinite. Теперь например хочу сделать что бы картинка стояла 3 секунды далее уходила влево за 2 сек. И за ней сразу же шла вторая картинка, и она должна стоять 3 секунды, и уходить влево за 2 секунды, далее за ней третья картинка выдвигается и 3 сек стоит. И т.д. Так вот, очень хочется понять эту тему, объясните пожалуйста подробней, как мне грамотно рассчитать ключевые кадры?
Сам я пытался сделать так:
0%{left: 0px;opacity: 1} 16%{left: 0px;opacity: 1} 25%{left: -680px; opacity: 0} 34%{left: -680px; opacity: 0} 43%{left: 680px;opacity: 0} 52%{left: 680px;opacity: 0} 61%{left: 0;opacity: 1} 70%{left: 0;opacity: 1} 79%{left: -680px;opacity: 0} 88%{left: 680px;opacity: 0} 97%{left: 680px;opacity: 0} 100%{left: 0px;opacity: 0}
Но на конечной точке, первая картинка не выдвигается плавно как до этого, а встает на первую точку резко.

Ответ

Это решение для варианта, когда текущий слайд уезжает со следующего. Если требуется просто сдвиг слайдов, то надо использовать другой способ.
Какова длительность всей анимации?
(3 сек + 2 сек) * 5 шт = 25 сек. 1 сек = 4%.
Как сделать анимацию каждой картинки?
3s картинка просто стоит:
0% { left: 0; } 12% { left: 0; } 2s уезжает влево:
18% { left: -100%; } Потом незаметно возвращается обратно:
18.001% { z-index: -1; left: -100%; } 100% { z-index: -1; left: 0; }
Значения повторно использовать нельзя, поэтому добавляем отклонение на .001%. Но надо, чтобы за 2 секунды до конца блок уже был видим, поэтому последнюю строку заменяем на:
92% { z-index: 0; left: 0; } 100% { z-index: 0; left: 0; } Исправить косяк с анимацией z-index - не показывать элемент раньше чем нужно:
91.999% { z-index: -1; left: 0; }
Как сделать анимацию слайдера?
Использовать animation-delay для слайдов.
Что Можно улучшить?
Производительность за счёт использование transform:translate вместо left.
section { position: relative; height: 10em; overflow: hidden; } div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; animation: slide 25s linear infinite both; } @keyframes slide { 0% { z-index: 1; left: 0; } 12% { z-index: 1; left: 0; } 18% { z-index: 1; left: -100%; } 18.001% { z-index: -1; left: -100%; } 18.002% { z-index: -1; left: 0; } 91.999% { z-index: -1; left: 0; } 92% { z-index: 0; left: 0; } 100% { z-index: 0; left: 0; } }

section { position: relative; height: 10em; overflow: hidden; } div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; transform: translateX(0); animation: slide 25s linear infinite both; } @keyframes slide { 0% { z-index: 1; transform: translateX(0); } 12% { z-index: 1; transform: translateX(0); } 18% { z-index: 1; transform: translateX(-100%); } 18.001% { z-index: -1; transform: translateX(-100%); } 18.002% { z-index: -1; transform: translateX(0); } 91.999% { z-index: -1; transform: translateX(0); } 92% { z-index: 0; transform: translateX(0); } 100% { z-index: 0; transform: translateX(0); } }