Имейте элемент с 2 анимациями CSS, выполняющимися одновременно

Question

Я экспериментирую с анимацией WebKits.

Возможно ли, чтобы элемент HTML одновременно выполнял более одной анимации?

Например:

    @-webkit-keyframes FADE 
    {
       from {
          opacity: 0;
       }
       to {
          opacity: 1;
       }
    }

    @-webkit-keyframes TRICKY 
    {
       0% {
          -webkit-transform: translate(0px,0) rotate(-5deg) skew(-15deg,0);
       }
       50% {
          -webkit-transform: translate(-100px,0) rotate(-15deg) skew(-25deg,0);
       }
       75% {
          -webkit-transform: translate(-200px,0) rotate(-5deg) skew(-15deg,0);
       }
       100% {
          -webkit-transform: translate(0px,0) rotate(0) skew(0,0);
       }
    }

// Can this element have FADE execute for 5 seconds BUT halfway between that animation
// can I then start the TRICKY animation & make it execute for 2.5 seconds?
#myEle {
    -Webkit-animation-name: FADE TRICKY;
    -Webkit-animation-duration: 5s 2.5s;
}

Выше был действительно простой пример. У меня было бы много библиотек анимаций, таких как вращение, затухание и т. Д. И я не хочу писать специальную анимацию, если я хочу, чтобы элемент выполнял 2 анимации одновременно.

Возможно ли это ...

//Not sure if this is even valid CSS: can I merge 2 animations easily like this?
@-webkit-keyframes FADETRICKY
{
   FADE TRICKY;
}

Answer 1

#myEle {
    -Webkit-animation-name: FADE,TRICKY;
    -Webkit-animation-duration: 5s,2.5s;
}

Используйте ',' без пробела. Я был в Chrome версии 16.0.899.0, чтобы попробовать.

Answer 2

Я думаю, вам придется вручную объединять анимации.

Если вам нужно использовать что-то подобное в нескольких местах, я бы посмотрел на Меньше CSS или аналогичное, так что вы можете использовать «mixins» (например, функции) для генерации CSS.Я использую его для абстрагирования специфичных для поставщика CSS, чтобы в основном файле .less 5 или 6 строк кода, специфичного для браузера, можно было заменить одним методом.