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過渡向後/反向

回答

相關問題