Почему анимированное с помощью css изображение некорректно отображается в Мозилле?

Здравствуйте!
Помогите пожалуйста разобраться.
Анимация по-разному отображается в браузерах: https://codepen.io/KrisIris/pen/Zaogqr
В хроме работает как задумано, только не пойму, почему пламя огня не отображается (оно в блоке container).
В мозилле стойки ракеты появляются слева от ракеты, а при анимации занимают нужное положение.
5a16e941673b4973741263.png
  • Вопрос задан
  • 178 просмотров
Пригласить эксперта
Ответы на вопрос 3
flexaccess
@flexaccess
Намерен работать программистом
У меня в мозиле работает корректно. Даже дым есть. А в хроме нет. Но летает. И стойки на месте там и там.
Ответ написан
lazalu68
@lazalu68
Salmon
<div class="container" style="display: none;">
    <div class="red flame"></div>
    <div class="orange flame"></div>
     <div class="yellow flame"></div>
 </div>


Действительно, почему же огня нет)

По поводу остального: попробуйте явно указать положение для дыма и стоек - top, left, margin, bottom.
Ответ написан
KrisIris
@KrisIris Автор вопроса
Мозила не понимает 2 анимации в одной.
Попробуйте обьеденить свойства примерно так:
animation: flicker 3ms ease-in infinite, sky2 3s linear 1;
Либо оберните огонь в еще один div и применяйте 2 анимации на 2 разных обьекта
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы