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

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

Итак, что я сделал, я устанавливаю ключевые кадры вдоль линии кривой с помощью 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-timing-function: ease-in, она применяет это облегчение к каждому отдельному ключевому кадру, что определенно не то, что я хочу. Я хочу, чтобы облегчение применимо ко всей анимации.

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

Ответ 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 поддерживает анимацию по пути, вам не нужны эти ключевые кадры, и вам не составит труда применить ослабление только к двум ключевым кадрам.

Ответ 2

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

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

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

Ответ 3

Некоторая справочная любовь для вас: http://www.w3.org/TR/css3-animations/

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

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