Как запустить две CSS анимации одновременно? - PullRequest
Новая
       90

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

0 голосов
/ 26 мая 2020

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

Я покажу, будет проще. Вот мой код: 

animation: hover  7s, shake .2s 3s infinite;

У меня есть две анимации: hover и shake . Первая встряска должна быть выполнена через 3 секунды, поэтому во время первой зависания , потому что у этого есть время, установленное в 7 секунд.

Цель состоит в том, чтобы в конце круг стал меньше и трясется одновременно.

Но что он делает, это когда встряхивание запускается, он перестает зависать, даже если hover должно остаться 4 секунды.

Есть идеи решить эту проблему? Пытался сделать сразу всю анимацию, но не получилось.

Обязан ли я делать только одну анимацию вместо двух?

Вот код анимации: 

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(1px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-3px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(3px, 0, 0);
  }
}

@keyframes hover {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(0.3);
  }
}

1 Ответ

2 голосов
/ 26 мая 2020

Проблема в том, что второе правило стиля скрывает первое, потому что они оба действуют на свойство transform.

Оберните ваш элемент в div и дайте родительскому элементу анимацию ("наведение" ), а ребенку еще одну («трясти»). Обратите внимание, что вы установили задержку 3s для анимации «встряхивания». 

.hover {
  animation: hover 7s infinite running;
}

.cursor {
  animation: shake .2s 3s infinite running;
  &:after {
    opacity: 1;
  } 
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(1px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-3px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(3px, 0, 0);
  }
}

@keyframes hover {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(0.3);
  }
}

.parent {
  height: 25px;
  width: 25px;
  left: 0;
  right: 0; 
  top:0;
  bottom: 0;
  margin: auto;
}

.cursor {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  right: 0; 
  top:0;
  bottom: 0;
  margin: auto;
  border: 1px solid #293133;
    &:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 50%;
    opacity: .5;
  }
}
<div class="parent hover">
  <div class="cursor"></div>
</div>

Вот рабочий Codepen

...