0

このCSS3シートを入手しましたが、少し問題があります

私はそれが入っているのと同じように出て行くようにする必要があります、つまりそれがダウを落とすときにそれを見るということです

@-moz-keyframes custom_effect {
    0% { height: 60px;}
    100% {height: 225px;}
}
@-webkit-keyframes custom_effect {
    0% {height: 60px;}
    100% {height: 225px;}
}

ul#nav-drp li:hover {
    -moz-animation-name: custom_effect;
    -moz-animation-duration: 1.0s;
    -moz-animation-timing-function: ease;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 4;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: custom_effect;
    -webkit-animation-duration: 1.0s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 1;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

入ってくるのと同じように出て行けないので、（-webkit-animation-timing-function: ease;）を（-webkit-transition: 1s ease-in-out;）に置き換えてみましたが、うまくいきませんでした。何が悪かったのでしょうか。

4

2 に答える 2

0

これを試して...

transition-timing-function:linear;

遷移タイミング関数をイーズからリニアに変更してみてください...

'ease'プロパティの開始は遅く、その後少し速くなり、最後には再び遅くなるため、出入りするのと同じ効果は得られません...

ただし、「linear」プロパティは、最初から最後まで同じ効果があります。

うまくいくかもしれない...

于 2012-12-29T23:15:53.590 に答える
0

あなたの質問が正しいかどうかはわかりませんが、「入るのと同じように出て行く」と言うと、height: 60px;ホバーアウトしたときにアニメーションに戻してほしいと思いますか？もしそうなら、それはキーフレームアニメーションでは不可能です。ホバーアウトするとすぐにアニメーションが停止し、要素が元の状態に戻ります。

ただし、これは代わりにトランジションを使用して解決することができます。

これがデモで、これが私の例のコードです。

HTML

<div class="box"></div>​

CSS

.box {
    width: 100px;
    height: 60px;
    background: #005ca1;
    -webkit-transition: height 1s;
       -moz-transition: height 1s;
        -ms-transition: height 1s;
         -o-transition: height 1s;
            transition: height 1s;
}

.box:hover {
    height: 225px;
}

この場合、期間を指定しheightてプロパティとして設定し、それを遷移する要素に追加しました。これにより、高さが「双方向」に遷移します。この場合、トランジションを短い形式で記述しましたが、明確にするために、長い形式のコードは次のようになります。 transition1s;

transition-property: height;
transition-duration: 1s;

タイミング機能などを追加することも可能ですが、例ではシンプルにしようと思いました。

お役に立てば幸いです。

于 2012-12-30T07:58:24.947 に答える