0

アニメーションを巻き戻すことができるかどうか疑問に思っていましたが、その場合は次のとおりです。

css3キーフレームでナビをアニメーション化しています:

        @-webkit-keyframes nav /* Safari and Chrome */
        {
            0% {width: 0%; opacity:0.0;}
        100% {width: 22%; opacity:0.5;}
        }

        nav:hover
        {
            animation: nav 3s;
            -moz-animation: nav 3s; /* Firefox */
            -webkit-animation: nav 3s; /* Safari and Chrome */
            -o-animation: nav 3s; /* Opera */
        }

ホバーするとアニメーションで拡大します。ホバーを離したときにアニメーションをスムーズに巻き戻す方法を考えています。

4

1 に答える 1

0

これを行うには、CSS トランジションを使用できます。

CSS の例

nav
{
    width: 0%;
    opacity: 0;
    transition:all 3s ease-in-out;    
}

nav:hover
{
    width: 22%; 
    opacity:0.5;     
}
于 2013-04-09T13:03:30.837 に答える