css - CSS过渡向后/反向

Question

我想知道是否有任何方法可以使用相同的 CSS 过渡实例来向前移动然后向后/向后移动。例如，假设我有这个过渡：

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

以及这次过渡的两名跑步者。一个淡入，另一个淡出：

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

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

我想要完成的是使用相同的过渡来进行淡入和淡出，但我这样做的方式不起作用。

score 2 · Accepted Answer

使用percentage代替from和to

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

您可以迭代此次数，也可以将其设置为无限

1 回答 1