CSS过渡向后/反向

我想知道是否有任何方式使用同一个CSS过渡实例来将其向前移动，然后向后/向后移动。例如，让我说我有这样的转变：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。

来源

2013-02-11 Rafael Rinaldi

就像例如，这里有一个更新的片段：HTTP：// jsbin .com/aduwif/4 – GNi33 2013-02-11 21:46:56

@ GNi33仍然不是我想要的。我想使用相同的转换实例来淡入和淡出。因此，当用户滚动缩略图时，它应该淡出，并且当用户滚动缩略图时，它应该淡入。我不想要循环动画。 [这是JSBin上的更新文件]（http://jsbin.com/aduwif/8/）。 – 2013-02-11 21:51:31

更像是这样的吗？ http://jsbin.com/aduwif/11 – GNi33 2013-02-11 21:58:33

使用percentage，而不是from和to

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

可以遍历这个号码你想要的时间，或只是将其设置为无限

来源

2013-02-11 21:42:46

是的，我认为这是要走的路。虽然我需要控制它的迭代来获得我想要的结果。我可能会想这:) – 2013-02-12 16:45:27

CSS过渡向后/反向

回答

相关问题