css 浏览器兼容性 firefox 不工作

Question

我正在开发一个新网站，但当我的 friend 在 firefox 上测试它时，其中一个功能无法正常工作。

我们发现 css 在 firefox 中不工作，但它在 Chrome 中工作。

整个代码:https://jsfiddle.net/wvkL6d2b/

我们试过了-webkit- 和 -ms-

 #separator{      width: 10px!important; max-width: 60px!important; height: 10px; background:red;}

  @keyframes in-out {
         from { width: 10px;
        }
              10%, 100% {
                  width: 60px;
              }
        to{ width: 60px; }
    }
  #separator {
        animation-name: in-out;
      animation-duration: 8s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-delay: 2s;
      }

我正在努力让它在两种浏览器上都能工作

Answer 1

你写的CSS属性错误太多了。请在此处找到更新代码 fiddle . 这些应该是要使用的属性。

 #separator {
   height: 10px;
   background: red;
   -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
 }

@-webkit-keyframes mymove {
  0% { width: 10px; }
  100% { width: 100px; }
}

/* Standard syntax */
@keyframes mymove {
  0% { width: 10px; }
  100% { width: 100px; }
}