CSS 애니메이션 전달이 CSS 전환을 막고 있습니다

Question

내 CSS 애니메이션 유형을 forwards으로 설정하여 완료되면 애니메이션의 완료된 프레임이 기본 상태가되도록합니다.

하지만 지금, 동일한 속성 (transform를) 애니메이션의 전이 더 이상 작동하지 않습니다 ...

나는 그렇지 불투명도 애니메이션이 이후에 0을 다시 설정되기 때문에 forwards을 사용해야합니다.

애니메이션이 끝나면 어떻게 전환하나요? 나는 자바 스크립트없이 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; 
    } 

}