CSS3 불투명도 애니메이션 + 디스플레이 : 없음

Question

내가 다음 요소를 페이드 아웃 디스플레이를 적용하지 않는 CSS3 애니메이션을 구현하기 위해 노력 : Animation CSS3: display + opacity

.step2 .user-input { 
    animation: hideThat 1s forwards; 
} 

@keyframes hideThat { 
    0% { opacity: 1; display: block; } 
    99% { opacity: 0; display: block; } 
    100% { opacity: 0; display: none; } 
} 

(모든 업체 : 아무도 여기에,이 SO 질문에 아이디어를 발견 접두사는 명확하게하기 위해 제거되었습니다.)

불투명도 전환은 작동하지만 표시 : 없음이 적용되지 않습니다. 나는 내가 여기서 잘못하고있는 것을 보지 못한다.

Answer 1

디스플레이가 애니메이션으로 표시 될 수 없으며, 아로 (Aro)도 좋은 소식을 전했습니다. 하지만, 당신의 희망을 잃지 말고 여전히

1 당신을위한 솔루션이 u는 여기에서 볼 수

거의 동일한 동작 및 사용 가시성 속성을 유지

:

@keyframes hideThat { 
    0% { height: inherit; opacity: 1; visibility: visible; } 
    99% { height: inherit; opacity: 0; visibility: visible; } 
    100% { height: 0; opacity: 0; visibility: hidden;} 
} 

를 볼 수 있습니다 : 여기 제공으로 http://jsfiddle.net/n1q3yubp/

는 리튬하여 요소를 "최소화"하는 KE 즉 :

.step2 .user-input { 
    overflow: hidden; 
    animation: hideThat 1s forwards; 
} 

@keyframes hideThat { 
    0% { height: inherit; visibility: visible; } 
    99% { height: 0; visibility: visible; } 
    100% { height: 0; opacity: 0; visibility: hidden;} 
} 

당신이 여기에서 볼 수 있습니다 : 당신이 그런 환상을 만들 수있는 반면 http://jsfiddle.net/n1q3yubp/1/