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

Question

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

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

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

Qwertiy · Accepted Answer · 2016-10-06T09:03:53.267

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

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

(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>
  <div style="animation-delay:   0s; background: red;"></div>
  <div style="animation-delay: -20s; background: green;"></div>
  <div style="animation-delay: -15s; background: blue;"></div>
  <div style="animation-delay: -10s; background: silver;"></div>
  <div style="animation-delay:  -5s; background: antiquewhite;"></div>
</section>

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

<section>
  <div style="animation-delay:   0s; background: red;"></div>
  <div style="animation-delay: -20s; background: green;"></div>
  <div style="animation-delay: -15s; background: blue;"></div>
  <div style="animation-delay: -10s; background: silver;"></div>
  <div style="animation-delay:  -5s; background: antiquewhite;"></div>
</section>

Отлично, но пожалуйста разъясните мне, как вы расчитываете ключевые кадры? По какой формуле? Что на что делите умножаете? Вот мне интересно как вы высчитали вот эти ключевые кадры 0% 12% 18% и т.д.? — Dolphin, Oct 06 '16 at 08:36
@Dolphin, в первом пункте же написано: 100% = 25 сек => 1 сек = 4%. — Qwertiy, Oct 06 '16 at 08:41
Да, Qwertiy, извините не заметил. А 1 сек = 4% это всегда или только на момент этих подсчетов (3 сек + 2 сек) * 5 шт = 25 сек. ? — Dolphin, Oct 06 '16 at 10:16
Qwertiy, я наверное замучал вас своими вопросами, но мне очень хочется понять и научится. Если что за ранее, прошу прощения. — Dolphin, Oct 06 '16 at 10:19
Qwertiy, например если длительность всей а нимации состовляет 15 сек, т.е. (3 сек + 2 сек) * 3 шт = 15 сек. (3шт изображений), то вэтом случае скольки % будет равна 1 секунда? — Dolphin, Oct 06 '16 at 10:26
@Dolphin, 100 % разделить на 15 сек получается 6.666. — Qwertiy, Oct 06 '16 at 10:30
Qwertiy, вот теперь я понял, и смогу сам рачитывать каждый ключевой кадр. Еще раз спасибо! — Dolphin, Oct 06 '16 at 10:34

SVE · Answer 2 · 2016-10-06T07:17:47.163

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

<div></div>

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

2 Answers2

Linked

Related