What is the difference between webkit and moz

Question

I do not understand the difference between -webkit-animationand -moz-animation. What is the difference between them or the same?

I searched for this question, but could not find out the differences.

Here is a sample code:

.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; }
}

Here in this code -webkit-animation, -moz-animationand finally, a simple one is used animation, why are these three used with the same functionality?

Answer 1

These are provider prefixed properties used by various browser rendering engines (gecko, blink, webkit, trident, etc.)

 -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-, , .

, , , , ,