FF46、IE11，如果元素没有设置border，动画里的border属性就无效，bug？

别的属性，比如color，margin，padding没有这个问题。

慕粉3160836

2016-06-08

源自：十天精通CSS3 9-1

关注问题我要回答

1530

操作

收起

2 回答

慕粉3160836 提问者
2016-06-12

（回复不能超过300字，只能放这了）

你试试这个链接~
http://jsbin.com/cufadet/edit?html,css,output
我3个浏览器都试了，把border样式的注释去掉，3个浏览器效果一样，加上注释的话，ff和ie上border就没效果了。
如果链接打不开的话，下面是代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
      div{
        width: 300px;
        height: 200px;
        background: red;
        /*border:0px solid #000;*/
      }
      @keyframes change{
        0%{
          margin:0px;
          color:#000;
          border:0px solid #000;
        }
        100%{
          margin:50px;
          color:yellow;
          border:10px solid #000;
        }
      }
      div:hover{
        animation:change 2s ease;
      }
    </style>
</head>
<body>
    <div>鼠标移入的时候尽量放在div右下角~</div>
</body>
</html>