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

Question

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

Answer 1

通常，当您animation向属性添加更改transform时，基本元素中指定的变换也应该保留在动画的关键帧中。也就是说，新的变换（属于动画的一部分）应该添加到现有的变换之上transform，而不是覆盖它。下面是应该如何完成。

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

我在这里写了一个类似的答案，回答了有关在元素上添加多个动画的问题，每个动画都transform独立于另一个动画修改属性的值。我将其链接到此处仅供参考，并不认为它们是重复的。

如上所述，当您尝试创建动画库或尝试将每个动画拆分为单独的类时，不可能将原始变换添加到每个动画的 kefyrames 中。举例来说，您想要将相同的bounce动画添加到多个元素，并且每个元素都有不同的初始transform设置，那么就不可能将其添加到动画的关键帧。

在这种情况下，您仍然可以使用 CSS 实现所需的输出，但使用单个元素来完成它会非常困难（在我看来几乎不可能）。

你有什么选择？好吧，一种选择是在包装元素上添加动画。

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

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

该解决方案非常通用，您可以将其应用于几乎所有此类情况。缺点是，如果您想堆叠多个此类转换，那么您最终可能会得到多个此类包装器。除了在动画关键帧中添加原始变换之外，没有纯 CSS 方法。

下面的代码片段是另一个示例。

.move-n-scale {
  position: relative;
  height: 100px;
  width: 100px;
  background: sandybrown;
  border: 1px solid chocolate;
  transform: scale(0.5);
  animation: move 1s linear infinite alternate-reverse;
}
.move {
  position: relative;
  display: inline-block;
  animation: move-only 1s linear infinite alternate-reverse;
}
.scale {
  position: absolute;
  height: 100px;
  width: 100px;
  top: 0px;
  left: 0px;
  background: sandybrown;
  border: 1px solid chocolate;
  transform: scale(0.5);
}
@keyframes move {
  from {
    transform: translateX(0px) scale(0.5);
  }
  to {
    transform: translateX(300px) scale(0.5);
  }
}
@keyframes move-only {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(300px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='move-n-scale'></div>
<div class='move'>
  <div class='scale'></div>
</div>

注意：为了澄清，我确实注意到您提到不想要一个针对这个问题非常具体的解决方案，例如包装它等。但是，我仍然添加了这个解决方案作为答案，因为它是我唯一的通用解决方案我知道。我添加第二个片段只是为了表明它确实是通用的。

Answer 2

您可以删除translate(100px, 300px);in .loading:after，然后设置translate(100px, 300px)in @keyframes，如下所示：

@keyframes bounce {
  0%,
  100% {
    transform: scale(0)translate(100px, 300px);
    -webkit-transform: scale(0)translate(100px, 300px);
  }
  50% {
    transform: scale(1)translate(100px, 300px);
    ;
    -webkit-transform: scale(1)translate(100px, 300px);
  }
}