Воспроизведение нескольких анимаций CSS одновременно

120

Как я могу воспроизвести две CSS-анимации с разной скоростью ?

  • Изображение должно вращаться и расти одновременно.
  • Вращение будет происходить каждые 2 секунды.
  • Рост будет повторяться каждые 4 секунды.

Пример кода:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 2s linear infinite;
    -webkit-animation:scale 4s linear infinite;
}

@-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@-webkit-keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}

http://jsfiddle.net/Ugc5g/3388/ - проигрывается только одна анимация (последняя заявленная).

Дон П
источник
Должно ли изображение масштабироваться во время вращения? Ответ, который я предоставил, - нет, но если это то, что вам нужно, то его можно настроить для этого
Ram G Athreya

Ответы:

154

TL; DR

С помощью запятой вы можете указать несколько анимаций, каждая со своими свойствами, как указано в ответе CriticalError ниже.

Пример:

animation: rotate 1s, spin 3s;

Оригинальный ответ

Здесь есть две проблемы:

# 1

-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;

Вторая строка заменяет первую. Итак, не имеет никакого эффекта.

# 2

Оба ключевых кадра применяются к одному и тому же свойству transform

В качестве альтернативы вы можете обернуть изображение в a <div>и анимировать каждое отдельно и с разной скоростью.

http://jsfiddle.net/rnrlabs/x9cu53hp/

.scaler {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    animation: scale 4s infinite linear;    
}

.spinner {
    position: relative;
    top: 150px;
    animation: spin 2s infinite linear;
}


@keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}
<div class="spinner">
<img class="scaler" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
<div>

умирает
источник
216

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

Пример:

animation: rotate 1s, spin 3s;
Критическая ошибка
источник
3
Спасибо, это гораздо более простое решение
Сергей Ротбарт
12
Черт возьми, запятая!
Захари Дахан,
4
как насчет разных задержек анимации?
маленький крошечный человечек
1
@ little-tiny-man вы также можете указать несколько animation-delayчерез кому, см. этот ответ
Клесун
35

Вы действительно можете запускать несколько анимаций одновременно, но в вашем примере есть две проблемы. Во-первых, используемый вами синтаксис определяет только одну анимацию. Второе правило стиля скрывает первое. Вы можете указать две анимации, используя следующий синтаксис:

-webkit-animation-name: spin, scale
-webkit-animation-duration: 2s, 4s

как в этой скрипке (где я заменил "scale" на "fade" из-за другой проблемы, описанной ниже ... Потерпите меня.): http://jsfiddle.net/rwaldin/fwk5bqt6/

Во-вторых, обе ваши анимации изменяют одно и то же свойство CSS (преобразование) одного и того же элемента DOM. Я не верю, что ты сможешь это сделать. Вы можете указать две анимации для разных элементов, возможно, изображения и элемента контейнера. Просто примените одну из анимаций к контейнеру, как в этой скрипке: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Рэй Уолдин
источник
Спасибо, что указали, что мы можем делать несколько анимаций, так как мы разделяем имя запятыми.
Zachary Dahan
3

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

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin-scale 4s linear infinite;
}

@-webkit-keyframes spin-scale { 
    50%{
        transform: rotate(360deg) scale(2);
    }
    100% { 
        transform: rotate(720deg) scale(1);
    } 
}
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

Рам Джи Атрея
источник
2
пользователь asekd для "на разных скоростях"
rnr Neverdies
На разных скоростях вращение происходит за 2 секунды, а масштабирование - за 4 секунды, так как запись двух операторов анимации не работает. Я позаботился о времени с помощью ключевых кадров.
Ram G Athreya
Хотя верно, что вы не можете воспроизводить две анимации преобразования одновременно (потому что одно преобразование перезапишет другое), неверно говорить: «Вы не можете воспроизводить две анимации, поскольку атрибут может быть определен только один раз». См. Принятый ответ об использовании значений, разделенных запятыми, с анимацией.
Джастин Таддей
2

вы можете попробовать что-то вроде этого

установите родительский элемент rotateи изображение, чтобы scaleвремя rotateи scaleмогло быть другим

Виторино Фернандес
источник