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;
}

我想要完成的是使用相同的过渡同时执行淡入和淡出，但我正在做的方式不起作用。

Here is the example on JSBin

Answer 1

使用percentage代替from和to

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

您可以迭代这么多次，或者只是将其设置为无限