6

position: 0%;位置をどのように変更するかの背景を持つ div 要素があるとしposition: 100%;ましょう。

キーフレームを適切に使用できないようです。まったく機能せず、すべて最新のブラウザーを使用しています。

ありがとう。

4

2 に答える 2

11

ホバーで背景の位置をアニメーション化するだけの場合は、キーフレームアニメーションの代わりにトランジションを使用する方がはるかに簡単です。例については、このフィドルを参照してください：http: //jsfiddle.net/hfXSs/

アニメーションにするために余分な労力を費やしたい場合は、divのanimation-play-stateを「paused」に設定し、ホバー時に「running」に変更する必要があります。ここでアニメーションの一時停止に関する仕様を参照してください：http：//dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-

編集：私は退屈だったので、キーフレームアニメーションを使用して同じことをします：http：//jsfiddle.net/wGRg5/

明らかに、フィドルには、divにカーソルを合わせていないときにアニメーションが一時停止するという問題がありますが、これはおそらく望ましい効果ではありません。

于 2011-09-02T13:31:15.240 に答える
6

一部のコードは、現時点ではWebkitのように見えます。

.box {
    display:block;
    height:300px;
    width:300px;
    background:url('http://lorempixum.com/300/300') no-repeat;
    background-position:-300px;
    -webkit-transition:background-position 1s ease;
}

.box:hover{
    background-position:0px;
}

経由： http： //jsfiddle.net/hfXSs/

詳細はこちら：http ：//css-tricks.com/parallax-background-css3/

于 2012-06-04T23:18:26.987 に答える