动画变换只有一个属性(比例)覆盖其他(翻译)

问题是,该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);
  }
}