5

背景画像の 1 つにドロップダウン効果を作成しようとしています。css3 を使用してそれを行うことができましたが、完全ではありません。

この効果は、カーテンが下がってから少し跳ね返るようなものになるはずです。css3 の問題は、最後のトランジションが前のトランジションをオーバーライドするため、同じプロパティでトランジションを行う方法がわからないことです。

これが私のコードです：

ul#nav li a {
  /* ADDS THE DROPDOWN CURTAIN TO THE LINKS BUT HIDDEN OFF SCREEN */
  background: url(images/drape2.png) 0px -149px no-repeat;
  /* CSS3 transitions */         
  -moz-transition: all 200ms ease-in-out;         
  -webkit-transition: all 200ms ease-in-out;         
} 

ul#nav li a:hover {            
  /* Action to do when user hovers over links */                          
  background-position: 0px 0px; /* make drape appear, POOF! */             
  background-position: 0px -10px; /* make drape appear, POOF! */             
}

どんな助けでも大歓迎です。

4

2 に答える 2

9

改行の代わりにカンマで連結したいでしょう

例えば：

background-color 500ms linear, color 500ms linear;
于 2011-11-26T02:54:54.037 に答える
4

このcubic-bezierように使用する：

cubic-bezier(0, 0.35, .5, 1.3)

アニメーションを逆方向に移動したり、少しバウンドさせたりすることができます。

デモ（Firefoxでのみ機能します）

ソース

編集：私はあなたにWebkitのみのオプションも作成しましたが、これら2つの手法の互換性はわかりません。Firefoxでも-mozブラウザプレフィックスを付けて動作する可能性がありますが、私はテストしていません。これは、トランジションではなくキーフレームアニメーションを使用します。

于 2011-11-26T02:59:59.460 に答える