2

ナビゲーション バーのボタンをアニメーション化しようとしています。テキスト (画像) は静止したまま、li タグの背景の画像を上下にバウンドさせたいと思います。

背景画像をアニメーション化するための直接的な CSS メソッドがないことは承知していますが、これを考慮に入れようとしました。

私のコードについては、以下の JSFiddle リンクを参照してください。

http://jsfiddle.net/JTp6x/

#Home
{ 
    position: absolute;
    width:125px;
    height:100px;
    background: transparent url('Images/Icons/HomeIcon.png') no-repeat top center;
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;}
.animated.hinge
{
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
        40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-30px);}
    60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-30px);}
    60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

#Home:hover {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    animation-name: bounce;
}

アニメーションのアニメーション方法とキー フレームです。

4

1 に答える 1

1

実際、特定の条件が満たされていれば、コンテンツを移動せずに CSS で背景画像をアニメーション化することは可能です。

画像へのリンクは相対リンクであり、コードには邪魔になるものがあるため、ウィキメディアコモンズの画像を使用する新しいフィドルをゼロから作成しました。これにより、バウンスのような効果がどのようになるかを示すはずです達成。あなたがやろうとしていると言ったことに基づいて、私はそれを<li>要素に入れて、あなたの@keyframes.

フィドルはこちら: http://jsfiddle.net/raphaelvalerio/SbAkP/

<ul>
    <li id="bouncy-background">stuff that absolutely should not move at all in any way. Ever.</li>
    <li>another item</li>
    <li>another item</li>
</ul>

CSS (簡潔にするためにベンダー プレフィックスを削除しています。フル バージョンについては、フィドルを参照してください):

#bouncy-background {
width: 100%;
height: 400px;
background-color: goldenrod;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/7/71/William_Shatner.jpg');
background-repeat: no-repeat;
background-size: auto 200px;
background-position: center bottom;
animation-name: bounce;
animation-duration: 2s;
animation-fill-mode: both;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {background-position: center bottom;} 
40% {background-position: center top;}
60% {background-position: center 75%;}
}

ここで重要なのは、何をアニメーション化するかです。パーセンテージ、ピクセルなど、計算された値を持つほとんどの要素をアニメーション化できます。この場合、背景自体ではなく、background-position計算された値であるためルールをアニメーション化します。

フィドルをチェックしていろいろと試してみて、私のレシピを自分の考えに合うものに変更できるかどうか試してみてください。

また、現時点では、アニメーションはロード時に単純に開始されますが、:hover.

于 2013-03-29T01:50:23.327 に答える