8

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?

Mahonri Moriancumer
  • 5,993
  • 2
  • 18
  • 28
Ayyan Alvi
  • 759
  • 2
  • 9
  • 24
  • 1
    duplicated https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit – Hernán Eche Oct 30 '14 at 12:49
  • @HernánEche the other question is asking what they are (both are "vendor-prefixed properties"). This question is asking specifically what is the difference between them (which the accepted answer in the other question doesn't explain as thoroughly as the one here). – Rodrigo Jun 06 '17 at 03:00

1 Answers1

21

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

Manquer
  • 7,390
  • 8
  • 42
  • 69