SASSがCSS 3を使用してアニメーションを一時停止し、最後のフレームで停止させる簡単な例

今日は携帯電話でこのcss 3のアニメーション効果を試してみました.アニメーション効果を最後のフレームにとどめることができます.マウス:hoverはアニメーションを一時停止します.比較的実用的な機能で、JSを使わなくてもこれらの効果を実現することができます.
しかし、テスト体験は携帯電話にjQueryのanimateアニメーションが流暢ではなく、カードを比較しても、まだ役に立たないと感じています.ここでテスト結果を記録します.
ここでcompassを使います

@import "compass/_css3";

@include keyframes(PanelNavRightToLeft) {
    from {
        left: 100%;
    }
    to {
        left: 0;
    }
}
@include keyframes(PanelNavLeftToRight) {
    from {
        left: 0;
    }
    to {
        left: 100%;
    }
}

#panel-nav {
    position: fixed;
    top: 0;
    left: 100%;
    right: 0;
    &.show {
        @include animation(PanelNavRightToLeft .5s forwards);
    }
    &.hide {
        @include animation(PanelNavLeftToRight .5s forwards);
    }
}

上のコードで実現される大まかな効果はfixedフローティングのレイヤが右から左にスライドして画面に固定表示され、閉じるボタンをクリックして左から右にスライドして隠すことです.
途中でJSの配置が必要です.これは必須です.展示ボタンをクリックすると、panel-navにclassを追加します.

$('#panel-nav').addClass('show');

これでアニメーションが始まります...
それから重点重点重点重点重点、どのようにアニメーションが1回実行した後にそこに止まって復元するのではありませんて、それでは意味がなくて、私はネット上で解決方法を探し始めて、多くの子供靴がやはりjsでcssアニメーションの停止を制御することを発見して、
実際にはanimationのfill-modeパラメータでできますが、対応する具体的なcssパラメータは:

.style {
    @include animation-fill-mode(forwards);
}

これでforwardsに設定すればいいので、最後のフレームで直接停止します.閉じるボタンと同じようにclassを操作して閉じるスライド効果を実現できます

$('#panel-nav').removeClass('show').addClass('hide');

また、デスクトップマウスに役立つアニメーションコントロールアトリビュートもあり、アニメーションを一時停止します.

animation-play-state: paused;

マウスの浮遊を実現する:hover時またはフォーカスを取得する:focus時にアニメーションを一時停止する

#panel-nav {
    &:hover {
        @include animation-play-state(paused);
    }
}

ヒント:cssスタイルの設定の順序に注意してください.上書きされないようにしてください.

@include animation(PanelNavRightToLeft .5s forwards);
// animation-play-state       animation            
@include animation-play-state(paused)

多分こんな感じ...