비 크롬 브라우저에서의 애니메이션 문제

Question

아래 애니메이션에 필요한 클래스를 성공적으로 추가하는 jQuery가 있습니다.

1) 먼저 아래의 애니메이션은 Chrome에서만 재생됩니다. 내 IE (버전 11.0) 및 Firefox (32.0.3)는 애니메이션을 전혀 재생하지 않습니다.

2) 둘째, 'opacity : 1;'이 없으면 둘째. 내 애니메이션 클래스에서 요소는 불투명도 0 (원래 값)으로 사라집니다. 애니메이션에서 설정하지 않고도 애니메이션의 최종 값을 유지하는 더 좋은 방법이 있습니까? 애니메이션 클래스에서 요소의 속성을 설정하는 것이 직관적이지 않은 것처럼 보입니다. 키 프레임 이전, 이후에 적용 여부가 명확하지 않기 때문입니다.

HTML :

<!-- Appear after 1 second --> 
<h1 data-appear='1'>1</h1> 

CSS :

h1 { 
    opacity: 0; 
} 

@-webkit-keyframes appear { 
    0% { opacity: 0; } 
    50% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-moz-keyframes appear { 
    0% { opacity: 0; } 
    50% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-o-keyframes appear { 
    0% { opacity: 0; } 
    50% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@keyframes appear { 
    0% { opacity: 0; } 
    50% { opacity: 0; } 
    100% { opacity: 1; } 
} 

.appear.delay1 { 
    animation-duration: 1s; 
    -o-animation-duration: 1s; 
    -moz-animation-duration: 1s; 
    -webkit-animation-duration: 1s; 

    animation: appear; 
    -o-animation-name: appear; 
    -moz-animation-name: appear; 
    -webkit-animation-name: appear; 

    opacity: 1; 
} 

Answer 1

1)에 CSS 규칙의 순서 내의 비밀 거짓말. 기간을 정의 할 때 아직 애니메이션을 정의하지 않았습니다. 나는 순서를 전환 할 경우 최신 파이어 폭스에서 나를 위해 작동 :

.appear.delay1{ 

    animation: appear; 
    -o-animation: appear; 
    -moz-animation: appear; 
    -webkit-animation: appear; 

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

2) 당신은 채우기 모드를 정의하면 불투명도를 정의 할 필요가 없습니다. 채우기 모드를 사용하면 애니메이션이 완료 될 때 애니메이션 상태를 지정할 수 있습니다. 이 경우 100 %를 고수하기를 원하기 때문에 채우기 모드를 전달으로 설정해야합니다.

-o-animation-fill-mode: forwards; 
-moz-animation-fill-mode: forwards; 
-webkit-animation-fill-mode: forwards; 
animation-fill-mode: forwards; 

나는 다음과 바이올린에 모두 함께 재현 :

http://jsfiddle.net/mxa377m4/