iOS - CSS關鍵幀不會動畫，只是有時候

我正在爲我建立一個小型網站。如果您點擊一個導航項目，舊內容應該在淡出時向後滑動。新內容應該從右側滑入，同時淡入和放大到100％。（在桌面上觀看現場實例）iOS - CSS關鍵幀不會動畫，只是有時候

在我的Mac上，一切工作正常，但在我的iphone上只有淡出 - 動畫效果（safari & chrome）。那麼，如果你加載網站，淡入淡出動畫有時會起作用，但如果你想切換內容，它永遠不會起作用。在動畫的持續時間內沒有任何內容，然後內容立即以100％的關鍵幀出現。

現場示例：http://haeki.com/haeki/ - 導航無法正常工作，但對於此示例，應該足夠了。 :-)

有人可以幫忙嗎？

/*動畫代碼*/

@keyframes fadeOut { 
     0%{ 
     transform: scale(1) translate3d(0,0,0); 
     opacity: 1; 
     } 
     25% { 
     transform: scale(1) translate3d(0,100px,-100px); 
     opacity: 0.5; 
     } 
     75% { 
     transform: scale(1) translate3d(-500px,100px,-100px); 
     opacity: 0; 
     } 
     100% { 
     transform: scale(1) translate3d(-500px,100px,-100px); 
     opacity: 0; 
     display: none; 
     } 
    } 

    @-webkit-keyframes fadeOut { 
     0%{ 
     -webkit-transform: scale(1) translate3d(0,0,0); 
     opacity: 1; 
     } 
     25% { 
     -webkit-transform: scale(1) translate3d(0,100px,-100px); 
     opacity: 0.5; 
     } 
     75% { 
     -webkit-transform: scale(1) translate3d(-500px,100px,-100px); 
     opacity: 0; 
     } 
     100% { 
     -webkit-transform: scale(1) translate3d(-500px,100px,-100px); 
     opacity: 0; 
     display: none; 
     } 
    } 

    @keyframes fadeIn { 
     0%{ 
     transform: scale(1) translate3d(500px,100px,-100px); 
     opacity: 0; 
     } 
     25% { 
     transform: scale(1) translate3d(500px,100px,-100px); 
     opacity: 0; 
     } 
     75% { 
     transform: scale(1) translate3d(0,100px,-100px); 
     opacity: 0.5; 
     } 
     100% { 
     transform: scale(1) translate3d(0,0,0); 
     opacity: 1; 
     } 
    } 
    @-webkit-keyframes fadeIn { 
     0%{ 
     -webkit-transform: scale(1) translate3d(500px,100px,-100px); 
     opacity: 0; 
     } 
     25% { 
     -webkit-transform: scale(1) translate3d(500px,100px,-100px); 
     opacity: 0; 
     } 
     75% { 
     -webkit-transform: scale(1) translate3d(0,100px,-100px); 
     opacity: 0.5; 
     } 
     100% { 
     -webkit-transform: scale(1) translate3d(0,0,0); 
     opacity: 1; 
     } 
    } 
    .inactive{ 
    -webkit-animation: fadeOut 2s forwards; 
    animation: fadeOut 2s forwards; 
    } 
    .active{ 
    -webkit-animation: fadeIn 2s forwards; 
    animation: fadeIn 2s forwards; 
    }

來源

2016-03-27 haeki

剛剛發現溢出存在問題：隱藏類.content-wrapper但仍在尋找工作解決方案。 – haeki

當時在iOS 9.2中的錯誤。更新到9.3，它的工作。良好的投入3小時.. :-D

來源

2016-03-31 19:11:10 haeki

似乎它仍然是9.3.1中的一個錯誤 – Ryan

iOS - CSS關鍵幀不會動畫，只是有時候

回答

相關問題