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?
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With