Как вы определяете CSS-анимацию с различными функциями синхронизации для каждого свойства?

Question

Я работаю с анимацией ключевых кадров в CSS и хочу иметь возможность задавать различные функции синхронизации для каждого свойства, которое я анимирую.Например, во время данного ключевого кадра я хотел бы анимировать непрозрачность от 0 до 1 с помощью функции упрощенной синхронизации, а верхнюю - от 0 до 100 с линейной функцией синхронизации.

Это возможно с помощью CSSпереходы, делая что-то вроде ниже.(К сожалению, мне нужны анимации с ключевыми кадрами по другим причинам.)

-webkit-transition-property: opacity, top;
-webkit-timing-function: ease-in, linear;

Кроме того, я заметил (на this link ), что спецификация для свойства animation-timer-function принимает разделенную запятойсписок.Однако я не вижу способа указать соответствующий список свойств или какую-либо документацию о том, для чего предназначен список функций синхронизации.Кто-нибудь знает, возможно ли то, что я пытаюсь сделать?

Answer 1

Мне проще использовать короткие запятые:

img {
   -webkit-animation:
      updown 2s ease-in infinite,
      rotate 1s ease-out infinite;
}

http://jsfiddle.net/desz9/