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

Question

Как я могу заставить две анимации 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/ - только одна анимация (последняя заявленная) игры.

css css-animations

194

Don P 18 Ноя 2014 в 06:32

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

–

Ram G Athreya

18 Ноя 2014 в 06:44

Answer 1

TL; DR

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

Пример:

animation: rotate 1s, spin 3s;

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

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

# 1

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

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

# 2

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

В качестве альтернативы вы можете обернуть изображение в <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>

251

rnrneverdies 18 Июл 2020 в 23:33

Можете ли вы добавить задержку между двумя анимациями в вашем примере? animation: rotate 1s, spin 3s;. Итак, поверните запуски, затем сделайте паузу на X секунд, а затем запустите анимацию вращения.

–

wharfdale

17 Авг 2021 в 14:58

animation: rotate 1s forward 5s, spin 3s forward 4s; Здесь 5 с — это задержка для анимации вращения, а 4 с — задержка для анимации вращения. @уорфдейл

–

Sadisha

1 Фев 2022 в 17:06

Answer 2

Поверните эти 2 строки:

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

В:

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

1

Oris Sin 27 Янв 2022 в 09:17

Answer 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">

4

Frozenfrank 20 Окт 2018 в 03:34

2

Пользователь попросил "на разных скоростях"

–

rnrneverdies

18 Ноя 2014 в 06:47

1

На разных скоростях вращение происходит за 2 секунды, а масштабирование происходит за 4 секунды, так как запись двух анимационных операторов не работает. Я позаботился о времени с помощью ключевых кадров.

–

Ram G Athreya

18 Ноя 2014 в 08:45

Хотя верно то, что вы не можете воспроизводить две анимации преобразования одновременно (поскольку одна трансформация перезаписывает другую), неверно говорить: «Вы не можете воспроизводить две анимации, поскольку атрибут может быть определен только один раз». См. Принятый ответ об использовании значений, разделенных запятыми, с анимацией.

–

Justin Taddei

7 Янв 2019 в 19:14

Answer 4

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

Установите для родителя значение rotate, а для изображения - scale, чтобы время rotate и scale могло быть разным

div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  -webkit-animation: spin 2s linear infinite;
}
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  -webkit-animation: scale 4s linear infinite;
}
@-webkit-keyframes spin {
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes scale {
  100% {
    transform: scale(2);
  }
}

<div>
  <img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120" />
</div>

2

Vitorino fernandes 18 Ноя 2014 в 06:50

Answer 5

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

Пример:

animation: rotate 1s, spin 3s;

292

isherwood 1 Авг 2022 в 19:24

4

А как насчет различных задержек анимации?

–

little tiny man

27 Апр 2019 в 00:37

3

@ little-tiny-man вы также можете указать несколько animation-delay через кому, см. этот ответ

–

Klesun

19 Авг 2020 в 15:13

1

Задержки @ little-tiny-man могут быть указаны как часть сокращенной формы анимации, например rotate 1s 0.5s, spin 3s 10s для задержек 0,5 и 10 с соответственно.

–

carecki

29 Мар 2021 в 12:24

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

–

sgrpwr

23 Апр 2021 в 22:18

У вас есть где-нибудь пример? Когда для одного элемента определено несколько анимаций, они должны применяться параллельно, а не последовательно (или последовательно). Обратите внимание, что если несколько анимаций изменяют одно и то же свойство параллельно, может показаться, что оно ведет себя неправильно, поскольку останется только последний эффект.

–

Mikko Rantalainen

18 Ноя 2021 в 16:43

Answer 6

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

-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/

41

Ray Waldin 18 Ноя 2014 в 07:22

Спасибо за указание, мы можем сделать несколько анимаций, так как мы разделяем имя запятыми.

–

Zachary Dahan

15 Июл 2015 в 08:20

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

6 ответов

TL; DR

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

Похожие вопросы

Связанные вопросы

Новые вопросы

css