18

画像にカーソルを合わせると、少し追加情報が表示される簡単なアニメーションを設定しています。jQueryのバックアップ部分は記述されており、正常に機能しますが、私が問題を抱えているのは、ユーザーがホバリングしたときにCSS3アニメーションが逆になることです。

したがって、ホバーするとうまく機能しますが、ホバーするとすぐに要素が消えます。私が知りたいのは、マウスが他の場所にホバリングしたときに、それらを後方にアニメーション化する方法があるかどうかです。どうもありがとう！

#recent-work div { position: relative; width: 300px; height: 168px; overflow: hidden; }
                
                #recent-work div:hover .recent-project-type {  
                    animation-name: showType;
                    animation-duration: .5s;
                    animation-timing-function: ease;
                    animation-delay: 0;
                    animation-iteration-count: 1;
                    animation-direction: normal;
                    animation-play-state: running;
                    -moz-animation-name: showType;
                    -moz-animation-duration: .5s;
                    -moz-animation-timing-function: ease;
                    -moz-animation-delay: 0;
                    -moz-animation-iteration-count: 1;
                    -moz-animation-direction: normal;
                    -moz-animation-play-state: running;
                    -webkit-animation-name: showType;
                    -webkit-animation-duration: .5s;
                    -webkit-animation-timing-function: ease;
                    -webkit-animation-delay: 0;
                    -webkit-animation-iteration-count: 1;
                    -webkit-animation-direction: normal;
                    -webkit-animation-play-state: running;
                    top: 0;
                }
                
                #recent-work div:hover .recent-project-title {  
                    animation-name: showTitle;
                    animation-duration: .5s;
                    animation-timing-function: ease;
                    animation-delay: 0;
                    animation-iteration-count: 1;
                    animation-direction: normal;
                    animation-play-state: running;
                    -moz-animation-name: showTitle;
                    -moz-animation-duration: .5s;
                    -moz-animation-timing-function: ease;
                    -moz-animation-delay: 0;
                    -moz-animation-iteration-count: 1;
                    -moz-animation-direction: normal;
                    -moz-animation-play-state: running;
                    -webkit-animation-name: showTitle;
                    -webkit-animation-duration: .5s;
                    -webkit-animation-timing-function: ease;
                    -webkit-animation-delay: 0;
                    -webkit-animation-iteration-count: 1;
                    -webkit-animation-direction: normal;
                    -webkit-animation-play-state: running;
                    bottom: 0;
                }
            
            .recent-project-title { position: absolute; left: 0; right: 0; bottom: -34px; padding: 8px 10px; background: rgba(0,0,0,.75); text-decoration: none; border: 0; font-size: 20px; font-weight: 400; color: #fff; }
                .recent-project-title:hover { color: #ff9900; text-decoration: none; }
                
            .recent-project-type { position: absolute; left: 0; top: -26px; padding: 4px 8px; font-size: 12px; font-weight: 600; background: #ff9900; text-transform: uppercase; color: #111; }
                .recent-project-type:hover { color: #fff; text-decoration: none; }

@keyframes showType {
    from { top: -26px; }
    to { top: 0; }
}

@-moz-keyframes showType {
    from { top: -26px; }
    to { top: 0; }
}

@-webkit-keyframes showType {
    from { top: -26px; }
    to { top: 0; }
}

@keyframes showTitle {
    from { bottom: -34px; }
    to { bottom: 0; }
}

@-moz-keyframes showTitle {
    from { bottom: -34px; }
    to { bottom: 0; }
}

@-webkit-keyframes showTitle {
    from { bottom: -34px; }
    to { bottom: 0; }
}
<div class="row" id="recent-work">
            <div class="span-one-third">
                <a href="#" class="recent-project-image"><img src="http://dl.dropbox.com/u/1762184/recent-work01.png" width="300" height="168"></a>
                <a href="#" class="recent-project-title">Philly</a>
                <a href="#" class="recent-project-type">Video</a>
            </div>
</div>

4

3 に答える 3

12

このような単純なものにはキーフレームは必要ありません。

私はあなたにデモ-webkitを作成しました（物事を単純にするためにベンダープレフィックスのみを使用）。

于 2011-11-23T18:34:54.173 に答える
2

これはCSSトランジションでも実行できます。それほど強力ではありませんが、単純です。アイデアは、上部と下部のリンクを含むdivを作成することですが、ラッパーのdivよりも大きいため、パーツは非表示になります。その上にカーソルを合わせると、高さが低くなり、リンクが表示されます。前後にアニメーション化するには、divのcssに「transition：height1s」を追加します。後で時間があれば、書いてみます。

于 2011-11-23T18:21:55.993 に答える
1

アニメーションを非ホバー状態に追加すると、元に戻すことができると思います。ここで私の超単純な例を参照してください。

于 2011-11-23T18:23:50.610 に答える