javascript - CSS3 で :hover イベントをアニメーション化する

Question

ここに私のウェブサイトがあります: http://adamshort2.hostoi.com/index.html

ナビゲーション リンクにカーソルを合わせるとわかるように、リスト要素の周りに「リボン」スタイルの白いボックスが表示されます。私が望むのは、それが表示されるだけでなく、上から下にスライドする (アニメーション化される) ことです。可能であれば CSS に固執しますが、必要に応じて Javascript/Jquery を気にしません。

Answer 1

これは、純粋な CSS で実行できます。<a>背景がアニメーション化されている間、テキストをそのままにしておく必要があるため、 だけではできません。background-position を変更することは可能ですが、別の要素 (具体的には疑似要素) を使用することにしました。

#nav a {
    /* required to keep absolute background on top */
    z-index: 1;
    /* required to keep text on top of absolute bg */
    position: relative;
    /* not mandatory; makes it look better when animating out
    because during that time it will be white on white */
    transition: color 1s;
}

#nav li a:before {
    background-color: #FFF;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    display: block;
    width: 100%;
    height: 100%;
    /* element will not appear without this */
    content: " ";
    position: absolute;
    /* height of the <a> so bg is off screen */
    top: -175px;
    left: 0;
    transition: top 1s;
    /* text will appear above bg */
    z-index: -1;
}
#nav li a:hover {
    color: red;
}
#nav li a:hover:before {
    top: 0px;
}

実際のデモ: http://jsfiddle.net/cLsue/

Answer 2

私が提案をすることができるなら：

このシナリオでは、CSS3 の translate3d を利用することをお勧めします。これは、leftプロパティを使用したアニメーション化はハードウェア アクセラレーションではなく、ハードウェア アクセラレーションであるためです。

2 つを比較した場合のパフォーマンスの向上を文書化した記事はたくさんあります。例を次に示します: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

Explosion Pill の例を使用してアニメーションを実現する方法は次のとおりです。

#nav a {
    /* required to keep absolute background on top */
    z-index: 1;
    /* required to keep text on top of absolute bg */
    position: relative;
    /* not mandatory; makes it look better when animating out
    because during that time it will be white on white */
    transition: color 1s;
}

#nav li a:before {
    background-color: #FFF;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    display: block;
    width: 100%;
    height: 100%;
    /* element will not appear without this */
    content: " ";
    position: absolute;
    /* height of the <a> so bg is off screen */
    /* text will appear above bg */
    z-index: -1;

    -webkit-transform: translate3d(0, -225px, 0);
    -moz-transform: translate3d(0, -225px, 0);
    -ms-transform: translate3d(0, -225px, 0);
    -o-transform: translate3d(0, -225px, 0);
    transform: translate3d(0, -225px, 0);
    -webkit-transition: -webkit-transform 1s ease;
    -moz-transition: -moz-transform 1s ease;
    -o-transition: -o-transform 1s ease;
    transition: transform 1s ease;
    /* Prevents flickering */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
#nav li a:hover {
    color: red;
}
#nav li a:hover:before {
    -webkit-transform: translate3d(0, -50px, 0);
    -moz-transform: translate3d(0, -50px, 0);
    -ms-transform: translate3d(0, -50px, 0);
    -o-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
}