0

キーフレームが適用された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を使用していますが、少し調整しています（キーフレームの違いを参照してください）

4

1 に答える 1

3

CSSプロパティを設定するときは、プロパティの完全な値を設定する必要があります。したがって、この例では、複数のタイプの変換（translateXとscale）を使用してTRANSFORMプロパティを設定する必要があります。1つのプロパティにすべての変換を設定する必要があります。現在の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 に答える