应用关键帧动画时变换缩放元素

Question

我有一个元素具有 css3 动画并应用了关键帧，但我仍然想缩放这个元素。但似乎因为 transform translate 已经在动画中应用了 transform scale 不起作用

例如：假设我有 4 个云（div 元素）从右到左移动，我希望这些云具有不同的比例

.x1 {
  -webkit-animation-name: moveclouds;
  -moz-animation-name: moveclouds;
  animation-name: moveclouds;

  -webkit-animation-duration: 170s;
  -moz-animation-duration: 170s;
  animation-duration: 170s;

  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-transform: scale(0.79);
  -moz-transform: scale(0.79);
  -ms-transform: scale(0.79);
  -o-transform: scale(0.79);
  transform: scale(0.79);
}
.x2{ ...}
.x3{...}
.x4{...}

@keyframes moveclouds {
  from {
    transform: translateX(2400px);
    /* note: I'm using vendor prefixes, I just want to simplified it here */
  }

  to {
    transform: translateX(-200px);
  }
}

动画效果很好，但不能缩放

问题：有人知道如何执行规模吗？

我正在使用这个示例 http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background，但稍微调整了一下（查看关键帧差异）

Answer 1

设置 CSS 属性时，您必须设置该属性的完整值。因此，在您的示例中，您希望使用多种类型的变换（translateX 和比例）设置 TRANSFORM 属性。您必须在单个属性上设置所有转换。删除当前的 SCALE 样式，然后执行以下操作（使用供应商前缀）。是的......你会有重复。这是复杂 CSS3 属性值的缺点。

@keyframes moveclouds {
  from {
    transform: translateX(2400px) scale(0.79);
    /* note: I'm using vendor prefixes, I just want to simplified it here */
  }

  to {
    transform: translateX(-200px) scale(0.79);
  }
}

如果您有一个具有多个背景图像的元素，请进一步扩展：

.some-div {
    background-image: url("img1.png"), url("img2.png");
}

并且您想在悬停时将 img2.png 更改为 img3.png，您必须：

.some-div:hover {
    background-image: url("img1.png"), url("img3.png");
}