CSS動畫中的非動畫幀序列

有沒有辦法讓CSS3動畫可以在2個關鍵幀之間直接跳躍而不進行補間？。CSS動畫中的非動畫幀序列

In this fiddle我使用Javascript和過渡到一個元素出來向左滑動，它重新定位到右側，並滑回祈使句的邏輯去有點像這樣：

轉到過渡off並將翻譯屬性設置爲0.
在即時setTimeout結束時，打開過渡並將翻譯設置爲離屏左邊
在過渡結束時，再次關閉過渡並將翻譯設置爲關閉屏幕右側
在結束時瞬間的setTimeout，上翻轉換和設置轉換爲0

同時，CSS動畫只能

集轉換爲0
集轉換爲關閉屏幕左
集翻譯屏幕外右側
集轉換爲0

Becau se動畫中的所有屬性都是隱式動畫，我無法在步驟之間跳轉3 - 我能做的最好的事情是將關鍵幀設置爲無限小，以期用戶不會感知到運動。 This example is functional, but feels like a hack。

@-webkit-keyframes slideInOut { 
    0% { 
    -webkit-transform: translate3d(  0, 0, 0); 
    } 
    50% { 
    -webkit-transform: translate3d(-1920px, 0, 0); 
    } 
    50.0001% { 
    -webkit-transform: translate3d( 1920px, 0, 0); 
    } 
    100% { 
    -webkit-transform: translate3d(  0, 0, 0); 
    } 
}

我是否僅限於Javascript來解決這個問題，還是可以使用CSS動畫模塊來完成？

來源

2013-12-18 Barney

我想你已經找到了最好的方法。 – Jivings

我同意Jivings，我使用這種方法[所有的時間]（http://cssdeck.com/labs/falling-circles） –

嘗試這種劈

50％：-webkit變換：translate3d（-1920px，0，0）;

50.0001％：-webkit-transform：translate3d（-1920px，0,0），visibility：hidden; （或不透明度：0）

50.0002％：-webkit-transform：translate3d（1920px，0，0），visibility：hidden;

50.0003％：-webkit-transform：translate3d（1920px，0,0），visibility：visible;

...

來源

2014-01-23 09:50:43 bonbonez

優秀的思維 - 短暫的消失比簡短的幻燈片更好。 – Barney

CSS動畫中的非動畫幀序列

回答

相關問題