Проблема в том, чтоtransform Значение свойства состоит из нескольких частей, таких какtranslate, scale и т.п.

Это теоретический вопрос об элементе, давайте.loader который имеетtransform:translate(10px, 10px) и в анимации я хочу оживитьscale имущество. В этом случае браузер не возьметtransform:translate(10px, 10px) и возьму толькоscale.

Я ищу способ обойти эту проблему.

Вот пример к этому вопросу. Пожалуйста, обратите внимание, что я не ищу ответа на этот конкретный пример (например: оберните элемент или добавьтеtranslate значение для определения анимации), но общее решение (если существует, конечно).

.loading {
  position: relative;
  width: 100px;
  height: 100px;
  background: #eee;
}
.loading:before,
.loading:after {
  content: "";
  width: 50%;
  height: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  /* the broswer doesn't take this */
  transform: translate(100px, 300px);
  -webkit-animation: bounce 2s infinite ease-in-out;
  animation: bounce 2s infinite ease-in-out;
}
.loading:after {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
@keyframes bounce {
  0%, 100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

<div class="loading"></div>