왜이 CSS3 애니메이션이 즉시 발생합니까?

Question

나는이 CSS3 애니메이션 문제가 있습니다 : 여기

@-webkit-keyframes hide_card { 
    0% { 
    width: 250px; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-width: 3px; 
    } 
    100% { 
    width: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    border-width: 0px; 
    } 
} 

@-moz-keyframes hide_card { 
    0% { 
    width: 250px; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-width: 3px; 
    } 
    100% { 
    width: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    border-width: 0px; 
    } 
} 

@-ms-keyframes hide_card { 
    0% { 
    width: 250px; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-width: 3px; 
    } 
    100% { 
    width: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    border-width: 0px; 
    } 
} 

@keyframes hide_card { 
    0% { 
    width: 250px; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-width: 3px; 
    } 
    100% { 
    width: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    border-width: 0px; 
    } 
} 

는 요소이다 : 내 자바 스크립트, 나는 JQuery와 사용하여 invisible 클래스를 추가하고에서

.activity .card.invisible { 
    width: 0px; 
    border-width: 0px; 
    margin: 0px; 
    opacity: 0; 
    -webkit-animation-name: hide_card; 
    -moz-animation-name: hide_card; 
    animation-name: hide_card; 

    -webkit-animation-duration: 1s; 
    -moz-animation-duration: 1s; 
    animation-duration: 1s; 

    -webkit-animation-iteration-count: 1; 
    -moz-animation-iteration-count: 1; 
    animation-iteration-count: 1; 
} 

및 요소는 숨겨진 (및된다 클래스는 속성에 추가됩니다.) 애니메이션 처리없이 즉시 수행합니다.

모든 도움을 주시면 감사하겠습니다. 필요에 따라 더 많은 정보를 제공 할 수 있습니다.

Answer 1

예, .invisible 클래스를 얻기 전에 애니메이션 규칙을 카드에 추가해야합니다. 그것은 다음과 같이 보일 것 때문에 그런 것 같아요 :

.activity .card { 
    transition: all 1s ease 1s; 
    width: 250px; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-width: 3px; 
} 

.activity .card.invisible { 
    width: 0px; 
    border-width: 0px; 
    margin: 0px; 
    opacity: 0; 
} 

나는 속기 생략 공급 업체 접두사 ...

을 사용