这是为什么CSS“过渡”值“无效属性值”

我有以下的CSS（和相同的前缀版本）：这是为什么CSS“过渡”值“无效属性值”

transition: -webkit-box-shadow 0.4s ease-out, 
      box-shadow   0.4s ease-out, 
      -webkit-transform 0.4s ease-out, 
      transform   0.4s ease-out, 
      opacity   0.4s ease-out, 
      -webkit-opacity 0.4s ease-out;

哪些浏览器给了我这么多废话：

enter image description here

将鼠标悬停在警告标志上会出现一个工具提示：“无效的属性值”。

我看不出差别来这（从CSS-Tricks）：

您可以逗号分隔值设置为不同的性质做不同的转换：
div { 
    transition: background 0.2s ease, 
       padding 0.8s linear; 
} 

请注意，我不能使用all，因为我在JS中设置了.style属性，我不想动画（除非有一种方法可以从转换中排除top和left） d仍然使用all，这会很好！）。

如何让我的转换再次工作？任何意见赞赏。

编辑：删除前缀那些没有解决它，在过渡仍然是“无效的属性值”和它的前缀形式。

编辑2：我完全困惑。我已经将它简化为这仍然无效代码：

-webkit-transition: transform 0.4s ease-out, opacity 0.4s ease-out; 
transition: transform 0.4s ease-out, opacity 0.4s ease-out;

编辑3：原来的解决方案只是将Chrome更新！如果可能的话，我仍然喜欢解决方法。

来源

2014-10-18 JJJollyjim

我的猜测是不喜欢的前缀。你可以尝试'过渡：所有。4s缓解，顶部0s，左0s;' – 2014-10-18 21:49:35

要找出，尝试删除带有前缀的属性。 – 2014-10-18 21:59:55

@ZachSaucier不幸的是，顶部和左侧仍然是这个动画。如果我在转换之前放置top并离开，也会发生同样的情况 – JJJollyjim 2014-10-19 00:42:12

它不是无效的值属性。

的spec说

如果列出的标识符之一是无法识别的属性名称或不是动画属性，实现必须仍然使用开始对动画的性能转换列表持续时间，延迟和定时功能在各自的索引中列出了'过渡时长'，'过渡时延'和 '过渡时间功能'。换句话说，不可识别的或不可识别的属性必须保存在列表中以保持索引的匹配。

所以，即使您使用供应商前缀，它仍然会工作。

来源

2014-10-18 22:08:08 Oriol

我不确定这是答案而不是评论。 Chrome告诉我这是一个“无效价值财产”，这不仅仅是我的看法。 – JJJollyjim 2014-10-19 00:43:06

@ JJ56这是一个错误。 [spec]（http://dev.w3.org/csswg/css-transitions/#single-transition-property），[验证器]（http://jigsaw.w3.org/css-validator/）和Firefox的开发人员工具说这是一个有效的价值。 – Oriol 2014-10-19 01:09:02

我希望这将是有用的：

.className { 
    transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); /* IE 9 */ 
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ 
}

来源

2015-04-19 16:36:52 sgazelle

你应该把前缀最前面的前缀放在最前面。见http://stackoverflow.com/questions/7080605/ordering-of-vendor-specific-css-declarations – 2015-04-22 08:19:49

这是为什么CSS“过渡”值“无效属性值”

回答

相关问题