Простая анимация CSS3 не работает в Firefox

Я пытаюсь Анимировать div. То, что я на самом деле делаю в анимации, - это перевод div на 100%. но анимация работает только в chrome и не работает в Firefox. Я попытался добавить префикс, и я также включил плагин prefix-free.js. Caniuse.com говорит, что firefox будет поддерживать анимацию без префикса. Я видел много похожих вопросов в стеке над потоком. но большинство из них используют свойства, которые еще не поддерживаются в Firefox и других. Но моя очень простая. Я даже попытался удалить перевод и изменение цвета фона. но он также не работает.Простая анимация CSS3 не работает в Firefox

HTML:

<div class="container"> 
    <div class="icon"></div> 
</div> 
<script src='//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js' ></script>

CSS:

.container { 
    padding:3em; 
} 
.icon { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    animation: test 1s linear 0 infinite normal both; 
} 
@keyframes test { 
    0% { 
     transform: translateX(50%); 
     background-color: red; 
    } 
    100% { 
     transform: translateX(0%); 
     background-color: yellowgreen; 
    } 
}

Demo

источник

2014-08-08 cJ_

синтаксис является недопустимым. Ваш ноль animation-delay должны иметь устройство, поэтому он должен быть 0s, не 0:

.icon { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    animation: test 1s linear 0s infinite normal both; 
}

безразмерных нули разрешаются только при длине, а не раз. См. this answer для объяснения (речь идет о переходах, но это относится и к анимации).

источник

2014-08-08 07:58:39 BoltClock

Изменение вашей анимации вызов этому

.icon 
{ 
    animation: test 1s linear infinite; 
}

кажется Firefox не понимает, сек ome свойства короткой руки.

источник

2014-08-08 07:54:35 demonofthemist

-3

Написать свой код, как этот

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     .container { 
      padding:3em; 
     } 
     .icon, .icon:hover { 
      width: 100px; 
      height: 100px; 
      background: red; 
      -webkit-animation: test 2s linear infinite; /* Chrome, Safari, Opera */ 
      animation:test 2s; 
     } 
      /* Chrome, Safari, Opera */ 
      @-webkit-keyframes test { 
       from {background: red;} 
       to {background: yellow;} 
      } 

      /* Standard syntax */ 
      @keyframes test { 
       from {background: red;} 
       to {background: yellow;} 
      } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="icon"></div> 
    </div> 
</body> 
</html>

источник

2014-08-08 07:56:30 user3074446

Простая анимация CSS3 не работает в Firefox

ответ

Смежные вопросы