0

我有一个元素具有 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但对其进行了一些调整（请参阅关键帧差异）

4

1 回答 1

3

设置 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");
}
于 2012-12-29T03:53:27.347 回答