Question

我有一个css3动画元素，其中应用了关键帧，但我仍想扩展此元素。但似乎因为变换翻译已经应用于动画变换比例无法正常工作

例如：假设我有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和scale）设置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");
}

应用关键帧动画时转换比例元素

1 个答案: