5

私はかなり基本的な「カラーパルス」アニメーションを持っています。何かにカーソルを合わせると、白から青にパルスします。これは、1 つのことを除いて正常に機能します。マウスを取り外すと、すぐに白に戻ります。真っ白に戻す方法を探しているのですが、今のところうまくいきません。

スタイラス コード:

@-webkit-keyframes pulse
    0%
        background #FFF
    50%
        background #88B1DA
    100%
        background #FFF

.scaffolding
    background    #FFF
    transition    background 0.5s linear

    &:hover
        animation pulse 2s linear infinite;
4

1 に答える 1

2

ホバーでもトランジションを使用

transitionをホバーと組み合わせる必要がありますanimation。（Webkitブラウザで）フィドルを参照してください。プロパティが要素の状態をトリガーしないため、元backgroundに戻すに#fffは、最初にそれをパルスカラーに変更する必要が#88B1DAあります。をサイクルタイムの半分に設定することで、どの時点で状態を終了してもスムーズに動作しているように見えます。transitionanimationtransitionanimationhover

@-webkit-keyframes pulse {
    0% { background: #FFF;}
    50% { background: #88B1DA;}
    100% { background: #FFF;}
}

.scaffolding {
    background:    #FFF;
    -webkit-transition: background 1s linear;
}
.scaffolding:hover {
    background:    #88B1DA;
    -webkit-transition: background 1s linear;
    -webkit-animation: pulse 2s linear infinite;
}

</ p>

于 2012-11-28T04:03:21.703 に答える