css - Animate transform only one property (scale) override other (translate)

Question

The problem is that the transform property's value has multiple part like translate, scale etc.

This is a theoretical question about element, let's .loader that has transform:translate(10px, 10px) and in the animation I want to animate the scale property. In this case, the browser will not take the transform:translate(10px, 10px) and will take only the scale.

I am looking for a way around this problem.

Here is an example to this question. Please, keep attention that I'm not looking for an answer to this particular example (like: wrap the element or add the translate value to the animation definition) but a generic solution (if exist, of course).

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

Answer 1

Generally when you add an animation with changes to the transform property then the transforms that are specified in the base element should also be carried over to be present within the animation's keyframes also. That is, the new transforms (that are part of the animation) should be added over on top of the existing transform and not overwrite it. Below is how it should be done.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="loading"></div>