Почему моя анимация не работает в Firefox?

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

.shine-me {
    width:100%; /*Make sure the animation is over the whole element*/
    -webkit-animation-name: ShineAnimation;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.12,.89,.98,.47);
    animation:ShineAnimation 5s infinite;
    animation-timing-function: cubic-bezier(.12,.89,.98,.47);
}
@-webkit-keyframes ShineAnimation{
    from {
        background-repeat:no-repeat;
        background-image:-webkit-linear-gradient(
            top left,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.0) 45%,
            rgba(255, 255, 255, 0.5) 48%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0.5) 52%,
            rgba(255, 255, 255, 0.0) 57%,
            rgba(255, 255, 255, 0.0) 100%
        );
        background-position:-250px -250px;
        background-size: 600px 600px
    }
    to {
        background-repeat:no-repeat;
        background-position:250px 250px;
    }
}

@keyframes ShineAnimation{
    from {
        background-repeat:no-repeat;
        background-image:linear-gradient(
            top left,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.0) 45%,
            rgba(255, 255, 255, 0.5) 48%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0.5) 52%,
            rgba(255, 255, 255, 0.0) 57%,
            rgba(255, 255, 255, 0.0) 100%
        );
        background-position:-250px -250px;
        background-size: 600px 600px
    }
    to {
        background-repeat:no-repeat;
        background-position:250px 250px;
    }
}
p
{
    background-color:#c0c0c0;
    padding:15px;
}

css css-animations firefox linear-gradients
person user3352837    schedule 11.04.2016    source источник
comment
Какое это имеет отношение к пхп?   -  person Epodax    schedule 11.04.2016
comment
Вам помог ответ? Если да, отметьте его как принятый (нажмите на пустую галочку под кнопками голосования).   -  person Harry    schedule 18.04.2016

Ответы (2)


arrow_upward
1
arrow_downward

Он не работает в Firefox по двум причинам:

  • Вы используете старый синтаксис линейного градиента WebKit внутри правила @keyframes. Новый синтаксис должен иметь ключевое слово to перед сторонами (например, to top left).
  • Firefox не поддерживает объявление background-image внутри @keyframes, в отличие от браузеров, использующих WebKit. Причина описана в моем ответе здесь. Переместите свойства background-image, применяемые в кадре 0%, в базовый селектор и анимируйте только background-position.

.shine-me {
  width: 100%;  /*Make sure the animation is over the whole element*/
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.0) 45%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0.0) 57%, rgba(255, 255, 255, 0.0) 100%);
  background-position: -250px -250px;
  background-size: 600px 600px;
  background-repeat: no-repeat;
  -webkit-animation: ShineAnimation 5s infinite cubic-bezier(.12, .89, .98, .47);
  animation: ShineAnimation 5s infinite cubic-bezier(.12, .89, .98, .47);
}
@-webkit-keyframes ShineAnimation {
  from {
    background-position: -250px -250px;
  }
  to {
    background-position: 500px 0px;
  }
}
@keyframes ShineAnimation {
  from {
    background-position: -250px -250px;
  }
  to {
    background-position: 500px 0px; /* increase the X position as required */
  }
}
p {
  background-color: #c0c0c0;
  padding: 15px;
}
<p class='shine-me'>Some text</p>

person Harry    schedule 11.04.2016

arrow_upward
-1
arrow_downward

Вам также нужно будет добавить следующий css:

-moz-animation:ShineAnimation 5s infinite;
    -moz-animation-timing-function: cubic-bezier(.12,.89,.98,.47);	


@-moz-keyframes ShineAnimation{
    from {
        background-repeat:no-repeat;
        background-image:-webkit-linear-gradient(
            top left,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.0) 45%,
            rgba(255, 255, 255, 0.5) 48%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0.5) 52%,
            rgba(255, 255, 255, 0.0) 57%,
            rgba(255, 255, 255, 0.0) 100%
        );
        background-position:-250px -250px;
        background-size: 600px 600px
    }
    to {
        background-repeat:no-repeat;
        background-position:250px 250px;
    }
}

person Sadikali Danntreliya    schedule 11.04.2016
comment
Префикс -moz- не требуется для анимации в Firefox, начиная с версии 16. Вы либо используете очень старую версию FF (или) не удосужились протестировать ее перед публикацией ответа. - person Harry; 11.04.2016