Анимация не работает правильно CSS3 - PullRequest
Новая
       12

Анимация не работает правильно CSS3

0 голосов
/ 11 февраля 2012

У меня были проблемы с CSS3, анимация работает в Chrome, но не работает в Firefox.

Код CSS: 

.mwhaha {
    width:100%;
    height:100%;
    position:fixed;
    z-index:98;
    background-color:rgba(0, 0, 0, .6);
    animation: fade-in 2s;
    -moz-animation: fade-in 2s;
    -webkit-animation: fade-in 2s;
}

Код анимации: 

@keyframes fade-in
{
    from {
        opacity:0;
        display:block;
    }
    from {
        opacity:1;
        display:block;
    }
}
@-moz-keyframes fade-in
{
    from {
        opacity:0;
        display:block;
    }
    to {
        opacity:1;
        display:block;
    }
}
@-webkit-keyframes fade-in
{
    from {
        opacity:0;
        display:block;
    }
    to {
        opacity:1;
        display:block;
    }
}

Как я уже сказал, код работает в Chrome, но не работает в Firefox. Я пробовал несколько других методов, чтобы заставить его работать как: 

@-moz-keyframes fade-in
{
    from {
        background-color:rgba(0, 0, 0, .0);
        display:block;
    }
    to {
        background-color:rgba(0, 0, 0, .6);
        display:block;
    }
}

Но до сих пор нет результата.

1 Ответ

0 голосов
/ 19 января 2015

Я поместил это в скрипку и исправил мелкие ошибки, которые, по моему мнению, не вызывали проблем.Скрипка отлично работает в Firefox 35.0 / Mac OSX Yosemite.

http://jsfiddle.net/o3qqeL8k/

Какую версию FF вы используете, на какой ОС? 

@keyframes fade-in {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fade-in {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fade-in {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
.mwhaha {
    width:100%;
    height:100%;
    position:fixed;
    z-index:98;
    background-color:rgba(0, 0, 0, .6);
    animation: fade-in 2s;
    -moz-animation: fade-in 2s;
    -webkit-animation: fade-in 2s;
}
<div class="mwhaha"></div>
...