2

背景画像でいくつかの div をアニメーション化したいと思います。ページ上の位置を移動して大きくしたい。

クラスを追加することで、jQuery を介してこれを行います。これにより、Webbit の CSS3 変換がトリガーされます。

私はこれから始めました：

.myStyle {
    width: 240px;
    height: 240px;
    top: 200px;
    -webkit-background-size: 240px;
    -webkit-transition-property: top, -webkit-background-size, width, height;
    -webkit-transition-duration: 1s;
}

そのスタイルを追加すると、DIV の幅と高さが変更され、新しい上部の位置に移動しますが、背景のサイズは変わりません。

それで、私はこれを試しました：

.myStyle {
    top: 200px;
    -webkit-transform: scale(1.5);
    -webkit-transition-property: top, -webkit-transform;
    -webkit-transition-duration: 1s;

}

しかし、同じ問題。トップはアニメーションしますが、スケールはアニメーションしません。

これは単なる構文エラーだと思います (願っています)。それとも、-webkit プロパティを移行することはできないのでしょうか?

4

1 に答える 1

1

Webkit はある単位次元 (%) から別の単位次元 (px) にアニメーション化できないため、最初のコードは機能しません。変えたら…

.myStyle {
    -webkit-background-size: 150%;
}

アニメーション化する必要がありますが、0 から 100% になります。2番目の例でも同様のことが起こっていると思います。

コードを単純化し、変換を行う前に遷移宣言を配置します。これにより、クラスを削除した場合に要素が遷移を逆にすることができます。また、均一にスケーリングする場合は、-webkit-transform: scale が最適です。

#div {
  /*your css*/
  -webkit-transition: all 1s ease;
}

#div.animated {
  -webkit-transform: -webkit-transform: scale(1.5);
}
于 2011-03-09T07:55:34.520 に答える