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

#css3

Доброго времени суток. 

Не могу вникнуть в ключевые кадры анимации, а точнее, например делаю слайдер, в нем
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}


Но на конечной точке, первая картинка не выдвигается плавно как до этого, а встает
на первую точку резко.
    

Ответы

Ответ 1

Это решение для варианта, когда текущий слайд уезжает со следующего.
Если требуется просто сдвиг слайдов, то надо использовать другой способ.

Какова длительность всей анимации?

(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);     }
}

  

  

  

  

  




Ответ 2

0% и 100% по сути совпадают. Лучше брать 4%, а не 0% или 0% и 96%.

Например:



div {  
  -webkit-animation: Anim 8s ease-in-out infinite;
          animation: Anim 8s ease-in-out infinite;
}


@-webkit-keyframes Anim {
  4%{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;}
}

@keyframes Anim {
  4%{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;}
}


div {
  width: 100px;
  height: 100px;
  background: tomato;
  position: absolute;
}