Есть ли способ для -webkit-animtion-timer-function применить ко всей анимации вместо каждого ключевого кадра?

Question

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

Итак, я установил ключевые кадры вдоль линии кривой с помощью CSS3:

 @-webkit-keyframes ftch {
 0% {
     opacity: 0;
     left: -10px;
     bottom: 12px;
 }

25% {
    opacity: 0.25;
    left: 56.5px;
    bottom: -7px;
 }

 50% {
    opacity: 0.5;         
    left: 143px;
    bottom: -20px;
 }

 75% {
    opacity: 0.75;
    left: 209.5px;
    bottom: -24.5px;
 }

 100% {
     opacity: 1;
     left: 266px;
     bottom: -26px;
 }

}

Однако, когда я запускаю эту анимацию, используя -webkit-animation-timer-function: ease-in, она применяет это замедление к каждому отдельному ключевому кадру, что определенно не то, что я хочу.Я хочу, чтобы смягчение применилось ко всей анимации.

Есть ли другой способ, которым я должен это делать?Есть ли какое-либо свойство для применения замедления ко всей последовательности, а не к каждому ключевому кадру?

Answer 1

Вы не можете применить функцию замедления к ряду ключевых кадров, потому что вы специально указываете объекту быть в определенной точке в определенное время. Если вы применили, скажем, упрощение для ряда ключевых кадров, то при 25% объект будет отставать от требуемой «контрольной точки», в конечном итоге ускоряясь до достижения 100%.

Если ваши очки более или менее равноудалены, вы можете подать заявку:

.animatedobject {
  -webkit-animation-timing-function: linear;
}

и ваша анимация будет выглядеть более менее удачно, если она будет немного роботизированной.

Более естественным подходом было бы ускорение, поддержание скорости и затем «торможение»:

 @-webkit-keyframes ftch {
 0% {
     opacity: 0;
     left: -10px;
     bottom: 12px;
    -webkit-animation-timing-function: ease-in;
 }

25% {
    opacity: 0.25;
    left: 56.5px;
    bottom: -7px;
    -webkit-animation-timing-function: linear;
 }

 50% {
    opacity: 0.5;         
    left: 143px;
    bottom: -20px;
    -webkit-animation-timing-function: linear;
 }

 75% {
    opacity: 0.75;
    left: 209.5px;
    bottom: -24.5px;
    -webkit-animation-timing-function: linear;
 }

 100% {
     opacity: 1;
     left: 266px;
     bottom: -26px;
    -webkit-animation-timing-function: ease-out;
 }
}

Если бы webkit поддерживал анимацию вдоль пути, вам не понадобились бы эти ключевые кадры, и у вас не было бы проблем с применением замедления только к двум ключевым кадрам.

Answer 2

Если вы хотите, чтобы разные функции замедления применялись к различным аспектам анимации, вы должны разделить анимацию, вложив ваш контент в два элемента div.

В этом случае вам необходимо создать родительский элемент div для примененияанимация движения и дочерний элемент div, к которому применяется анимация непрозрачности.Анимация непрозрачности должна иметь кривую замедления: линейную, а анимация движения должна иметь любую функцию замедления, которая вам больше всего подходит.Однако я бы повторил, что Duopixel говорит о смешивании кривых замедления и фиксированных контрольных точек - в этом случае вам фактически не нужны анимации, только две анимации 0%: 100% - одна для родительского и одна для дочернего элемента div.

Сделав много CSS3-анимации, я написал это руководство для нашего продукта Sencha Animator - в нем есть некоторая полезная общая информация о том, как заставить сложные анимации работать с CSS3 - даже если вы этого не хотитеиспользовать инструмент.

Answer 3

Некоторые ссылки любят вас: http://www.w3.org/TR/css3-animations/

В частности: http://www.w3.org/TR/css3-animations/#timing-functions-for-keyframes-

Возможно, вы захотите сделать анимацию, например, переместитесь в одно место, затем в другое, затем в другое.в нескольких ключевых анимациях, а не в одной.