Проблема с анимацией в браузерах без хрома

Question

У меня есть jQuery, который успешно добавляет необходимый класс для анимации ниже.

1) Во-первых, анимация ниже воспроизводится только в Chrome. Мой IE (версия 11.0) и Firefox (32.0.3) вообще не воспроизводят анимацию.

2) Во-вторых, если у меня нет «непрозрачности: 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/