jquery .show()에서 CSS3 애니메이션을 트리거링합니다.

Question

사용자에게 제공하기에는 "너무 긴"오류와 함께 사용하도록 준비된 멋진 3 부분 iPhone 스타일의 "팝"애니메이션이 있습니다. 그것을 사용하기 위해, 나는 숨겨진 에러 div에서 .show()를 호출한다. 사파리에서는 멋지게 작동하지만 파이어 폭스에서는 쿵쿵 쿵쾅 거리는 소리를 내며 애니메이션을 완전히 건너 뛰고 일반 .show()를 사용합니다.

mozilla에서도 제대로 작동하려면 어떻게해야합니까?

관련 CSS :

@-webkit-keyframes pop-in { 
    0% { opacity: 0;-moz-transform: scale(0);-webkit-transform: scale(0); } 
    50% { opacity: 1;-moz-transform: scale(1.5);-webkit-transform: scale(1.5); } 
    100% { opacity: 1;-moz-transform: scale(1);-webkit-transform: scale(1); } 
} 

@-moz-keyframes pop-in { 
    0% { opacity: 0;-moz-transform: scale(0);-webkit-transform: scale(0); } 
    50% { opacity: 1;-moz-transform: scale(1.5);-webkit-transform: scale(1.5); } 
    100% { opacity: 1;-moz-transform: scale(1);-webkit-transform: scale(1); } 
} 

@-ms-keyframes pop-in { 
    0% { opacity: 0;-moz-transform: scale(0);-webkit-transform: scale(0); } 
    50% { opacity: 1;-moz-transform: scale(1.5);-webkit-transform: scale(1.5); } 
    100% { opacity: 1;-moz-transform: scale(1);-webkit-transform: scale(1); } 
} 

@keyframes pop-in { 
    0% { opacity: 0;transform: scale(0);transform: scale(0); } 
    50% { opacity: 1;transform: scale(1.5);transform: scale(1.5); } 
    100% { opacity: 1;transform: scale(1);transform: scale(1); } 
} 


#error { 
    ... 
    -webkit-animation:pop-in 0.3s; 
    -moz-animation:pop-in 0.3s; 
    -ms-animation:pop-in 0.3s; 
    animation:pop-in 0.3s; 
    ... 
} 

Answer 1

단순히 # error.active과 요소를 보여주는 후 선택기를 만드는 .active는 클래스를 추가 ..

Answer 2

jquery.show()는 기본 지속 시간을 가지고 400.

jquery.show (0); 그러면 $ ("# idElement")를 통해 CSS 불투명도로 요소를 애니메이션화합니다. addClass ("myOpacityClass");