webkit和moz有什么区别

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

这些是浏览器的不同渲染引擎使用的供应商前缀属性(壁虎,闪烁,webkit,三叉戟等)

 -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代码的旧版浏览器,因此在实践中,您需要花费大量时间才能删除前缀.

另请注意,首先声明前缀版本然后是标准版本,因此,如果更新规范,标准版本将覆盖前缀版本