Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between webkit and moz

Tags:

css

webkit

I do not understand the difference between -webkit-animation and -moz-animation. What is the difference in between the two or these, or are the same?

I googled this question but couldn't find out the differences.

Here is the code example:

.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-animation and at last the simple animation is used why these three are being used with same functionalities?

like image 261
Ayyan Alvi Avatar asked May 18 '14 03:05

Ayyan Alvi


1 Answers

These are the vendor-prefixed properties used by different rendering engines of browsers(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). 

Usually they're used to implement CSS features that are proprietary or the browser companies are still fighting over on the way it is supposed to be implemented, until finalisation by W3.

Using prefixes allows properties to be set to each rendering engine so you can tweak your css to adjust for the different implementations.

In theory after the inconsistencies are resolved the prefix will be removed. However there are always older versions of the browser you need to write and support CSS code for, so in practice it will take a lot of time before you can drop the prefix.

Also note that it's convention to declare the prefixed version first and then the standard version, so if and when the specifications are updated, the standard version will override the prefix versions

like image 144
Manquer Avatar answered Nov 15 '22 07:11

Manquer