Играть несколько анимаций CSS в то же время

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

5 53
css css3 css-animations

5 ответов:

TL; DR

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

пример:

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

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

пример:

animation: rotate 1s, spin 3s;
156

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

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

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

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

31

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

.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(180deg);
    }
    100% { 
        transform: rotate(180deg) scale(2);
    } 
}
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
2

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

установить родителя 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>
1