CSSアニメーション転送がCSSトランジションを防止しています

Question

CSSアニメーションタイプをforwardsに設定して、終了時にアニメーションの終了フレームがデフォルトの状態になるようにします。

しかし、今、同じプロパティ（transform）をアニメーション化移行は、私がそうでなければ、不透明度をアニメーション化した後、0にリセットされますので、forwardsを使用する必要が...もう

が機能していません。

アニメーションが終了するとすぐにどのように遷移を有効にすることができますか？私はjavascriptのないCSSのみのオプションを探しています。

CSS

album { 
    opacity: 0; 
    animation:movein 0.6s forwards; 
    transition: all 0.3s ease-in-out; 
} 

album:hover { 
    transform:scale(1.05);      // this doesn't work 
    box-shadow: 0px 0px 45px rgba(0,0,0,0.5); // this works 
} 

@keyframes movein { 
    from { 
    opacity:0; 
    transform: translateX(-100px); 
    } 

    to { 
    opacity:1; 
    transform: translateX(0px); 
    } 
} 

album:nth-child(2) { 
    animation-delay: 0.2s;  // delay keeps opacity 0 for a while 
} 
album:nth-child(3) { 
    animation-delay: 0.4s;  // delay keeps opacity 0 for a while 
} 

Answer 1

一つの解決策は、あなたのアニメーションを分割することであろう。フェードインアニメーションのみがアニメーションフォワードを持ちます。

album { 
    opacity: 0; 
    animation:movein 0.6s, fadein 0.6s forwards; 
    transition: all 0.3s ease-in-out; 
} 
@keyframes movein { 
    from { 
    transform: translateX(-100px); 
    } 
    to { 
    transform: translateX(0); 
    } 
} 
@keyframes fadein { 
    from { 
    opacity:0; 
    } 
    to { 
    opacity:1; 
    } 

}