왜이 애니메이션이 작동하지 않습니까?

2 초 동안이 div 컨테이너 숨기기 (표시 : 없음)를 원합니다.왜이 애니메이션이 작동하지 않습니까?

또는 더 나은 솔루션이있는 경우, 그것을 게시하시기 바랍니다)하지만 난 당신이 날 도울 수 있기를 바랍니다 더 JQuery와 또는 자바 스크립트

#vcontainer { 
    height: 450px; 
    width: 100%; 
    background-color:black; 
    margin-top:10px; 
    margin-bottom:10px; 
    animation: vldng 4s; 
    -webkit-animation: vldng 4s; 
    display: none; 
} 

@keyframes vldng { 
    0%{display: none;} 
    50%{display: block;} 
    100%{display: block;} 
} 

@-webkit-keyframes vldng { 
    0%{display: none;} 
    50%{display: block;} 
    100%{display:block;} 
}

을 기쁘게하지 않습니다! :)

출처

2014-07-16 Tim4497

'display'는 (는) 애니메이션 가능한 속성이 아닙니다. [여기] (http://www.w3.org/TR/2009/WD-css3-transitions-20091201/#animatable-properties-)를 확인하십시오. 또 다른 옵션으로 [여기] (http://jsfiddle.net/35cBP/)와 같이'opacity'를 사용할 수 있습니다. – Harry

오, 알았어, 고마워. :) – Tim4497

display 대신 Opacity을 사용할 수 있습니다.
이지만 opacity=0은 display=none과
과 다른 상태입니다. 아무 것도 표시되지 않습니다.
opacity:0 요소가 자리 표시 자 역할을하게하지만 display:none은보기 포트에서 요소를 제거합니다.

출처

2014-07-17 15:55:42

왜이 애니메이션이 작동하지 않습니까?

답변

관련 문제