css - 逆方向/逆方向の CSS トランジション

Question

同じ CSS 遷移インスタンスを使用して、前方に移動してから後方/後方に移動する方法があるかどうか疑問に思っています。たとえば、次の遷移があるとします。

@-webkit-keyframes fade-transition {
    from { opacity: 0; }
    to { opacity: 1; }
}

そして、この移行のための 2 つのランナー。1 つはフェードインを行い、もう 1 つはフェードアウトを行います。

.fade-in {
    -webkit-animation: fade-transition .2s linear backwards;
}

.fade-out {
    -webkit-animation: fade-transition .2s linear forwards;
}

私が達成したいのは、同じトランジションを使用してフェードインとフェードアウトの両方を行うことですが、私がやっている方法ではうまくいきません。

score 2 · Accepted Answer

andpercentageの代わりに使用fromto

@-webkit-keyframes fade-transition {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

この回数を繰り返すか、無限に設定することができます

1 に答える 1