CSS關鍵幀的移動開始動畫

Question

之前我有css類和下面的關鍵幀動畫圖像衰落和從左側滑動。

過渡工作只是正常的桌面然而在移動設備，過渡就像是完成第一次顯示100％的關鍵幀，然後轉換開始於0％，並執行像您所期待的動畫。

我嘗試添加了0％的風格原始類的動畫開始然而這沒有工作之前啓動它在正確的位置。有任何想法嗎？謝謝！

.slideLeft { 
 
    animation-duration: 1s; 
 
    animation-fill-mode: both; 
 
    animation-timing-function: ease-out; 
 
    animation-name: slideInLeft; 
 
    transform: translate3d(-100%, 0, 0); 
 
\t opacity: 0; 
 
\t visibility: visible; 
 
} 
 

 

 
@keyframes slideInLeft { 
 
    0% { 
 
     transform: translate3d(-100%, 0, 0); 
 
     opacity: 0; 
 
     visibility: visible; 
 

 
    } 
 
    100% { 
 
     transform: translate3d(0, 0, 0); 
 
     opacity: 1; 
 
     visibility: visible; 
 
    } 
 
}

<img src="http://content.mycutegraphics.com/graphics/food/whole-pizza.png" class="slideLeft"/>

Answer 1

img{ 
 
    animation-duration: 1s; 
 
    animation-fill-mode: both; 
 
    animation-timing-function: ease-out; 
 
    animation-name: slideInLeft; 
 
    transform: translate3d(-100%, 0, 0); 
 
\t visibility: visible; 
 
} 
 

 

 
@keyframes slideInLeft { 
 
    9% { 
 
     transform: translate3d(-100%, 0, 0); 
 
     opacity: 0; 
 

 
    } 
 
    100% { 
 
     transform: translate3d(0, 0, 0); 
 
     opacity: 1; 
 
     
 
    } 
 
}

<img height="70" src="https://pbs.twimg.com/profile_images/828213014599839749/VGv8LT6T.jpg">

Answer 2

我道歉，它看起來像這個問題是不完全的CSS相關。這是一個項目，在頁面構建後我被帶入，我發現有一個JavaScript將一個.start類添加到該項目，當它滾動到視圖中時會觸發該過渡。該修復是我最初的想法，將0％關鍵幀值添加到類中，以便在轉換開始之前從正確的位置開始。我只需要跟蹤所有具有.start轉換關聯並添加關鍵幀值的類。