1

CSS3 webkit-keyframes を使用して膨張させたい背景画像を持つ div があります。

を使用してアニメーション化しようとしbackground-sizeましたが、CSS3 (または少なくとも Safari Webkit) ではアニメーション化されないようbackground-sizeです。

このコードを書き直して同じ効果を得るにはどうすればよいですか (つまり、画像を div の中心から膨らませたいのですが)?

いくつかの単純なバニラ JavaScript も問題ありませんが、私は純粋な CSS ソリューションを好みます。

HTML:

<div id="image"></div>

CSS:

div#image
{
    background: url('../img/image.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 125px;
    height: 252px;
    position: absolute;
    left: 170px;
    top: 260px;
    -webkit-animation-delay: 0s;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.35, 1.0);
    -webkit-transform: translateZ(0);
    -webkit-animation-duration: 4s;
    -webkit-animation-name: pop_image;
}

@-webkit-keyframes pop_image
{
    0% {background-size: 0%;}
    25% {background-size: 0%;}
    48% {background-size: 100%;}
    100% {background-size: 100%;}
}

編集：

でアニメーション化も試みました-webkit-transform: scale()が、それもうまくいきませんでした。

編集2：

それで、アニメーションが-webkit-transform: scale()うまくいったので、ブラウザを更新する必要がありました。

CSS3 キーフレームは次のとおりです。

@-webkit-keyframes pop_keys
{
    0% {-webkit-transform: scale(0,0);}
    25% {-webkit-transform: scale(0,0);}
    48% {-webkit-transform: scale(1,1);}
    100% {-webkit-transform: scale(1,1);}
}
4

1 に答える 1

1

css を使用できます。scale画像をアニメーション化して拡大します。

http://jsfiddle.net/DvVug/1/

編集：

画像が元のサイズに「ジャンプ」しないように更新されました

于 2013-03-04T15:13:31.030 に答える