CSS过渡向后/反向答案

【问题标题】：CSS transition going backwards/reverseCSS过渡向后/反向
【发布时间】：2013-01-27 02:20:57
【问题描述】：

我想知道是否有任何方法可以使用相同的 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;
}

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

【问题讨论】：

作为示例，这里是更新的 sn-p：jsbin.com/aduwif/4
@GNi33 仍然不是我想要的。我想使用相同的过渡实例来进行淡入和淡出。因此，当用户滚动缩略图时，它应该淡出，当用户滚动缩略图时，它应该淡入。我不想要循环动画。 Here is the updated file on JSBin.
类似的东西？ jsbin.com/aduwif/11
@GNi33 是的，效果应该看起来完全一样，但问题是我想知道是否可以通过使用单个 CSS 过渡实例来做到这一点。这个想法是让两个不同的类运行相同的转换；但应该倒着执行。在我给出的示例中，向前运行过渡，它使不透明度从 0 变为 1。但是，如果向后运行，则使不透明度从 1 变为 0，这是一种淡出效果。

【解决方案1】：

使用percentage 代替from 和to

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

您可以根据需要重复此次数或将其设置为无限

【讨论】：