Question

我不明白-webkit-animation和-moz-animation之间的区别。这两者之间有什么区别，或者是相同的？

我用谷歌搜索了这个问题但却找不到差异。

以下是代码示例：

.blink_me {
 font-size:60px;
 font-weight:bold;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

-moz-animation-name: blinker;
-moz-animation-duration: 1.5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;

animation-name: blinker;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

@-moz-keyframes blinker 
{  
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

 @-webkit-keyframes blinker
 {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
 }

@keyframes blinker
{  
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

此代码中-webkit-animation，-moz-animation，最后使用简单的animation，为什么这三个功能使用相同的功能？

Answer 1

这些是浏览器的不同渲染引擎（gecko，blink，webkit，trident等）使用的供应商前缀属性

 -webkit for Chrome(blink,webkit), Safari(webkit) and Opera(blink); 
 -moz for Firefox(gecko), 
 -o for Opera(presto), 
 -ms for Internet Explorer(Trident).

通常它们会被用来实现专有的CSS功能，或者浏览器公司仍然会按照应该实施的方式进行争夺，直到W3最终确定。

使用前缀允许将属性设置为每个渲染引擎，以便您可以调整css以针对不同的实现进行调整。

理论上，在解决了不一致之后，将删除前缀。但是，您总是需要编写和支持CSS代码的旧版本浏览器，因此在实践中，您需要花费大量时间才能删除前缀。

另请注意，首先要声明带前缀的版本然后再使用标准版本，因此，如果更新规范，标准版本将覆盖前缀版本

webkit和moz有什么区别

1 个答案: