javascript - webkitTransition , what does this mean to CSS-3 , using Jquery? -

please have @ below code :

$(document).ready(function () {     var defaults = {         duration: 4000,         easing: ''     };      $.fn.transition = function (properties, options) {         options = $.extend({}, defaults, options);         properties['webkittransition'] = 'all ' + options.duration + 'ms ' + options.easing;         console.log(properties);         $(this).css(properties);     };      $('.element').transition({         background: 'red'     });  }); 

i reading through famious article online , if go section says "programmatic transitions" , u'll see talking , when coding animations in css-3 used below syntex :

-webkit-transform: .3s; -moz-transform: .3s; -ms-transform: .3s; -o-transform: .3s; 

but when creating css-3 transitions , see alot of stuff below :

var transendeventnames = {   webkittransition : 'webkittransitionend',   moztransition    : 'transitionend',   otransition      : 'otransitionend otransitionend',   transition       : 'transitionend' } 

what webkittransition , moztransition etc ??

in 1st example have provided , webkittransition ? although seemingly obvious , these things mean , totally elude me js newbie.

would appreciate genuin ttemp answwer question .

edit :: : want answer below question .

is transition in js equililent transition css-3 ?? why uppercase syntax . pointed out in comments below , jquery added prefixes automatically.

thank you.

alex-z.

is transition in js equililent transition css-3

yes, "js transition" same css transition. matter of , how transitions created , triggered, nevertheless result same.

why uppercase syntax

this naming convention. css proprieties "named" in cssstyledeclaration camel-case:

partial interface cssstyledeclaration {  [treatnullas=emptystring] attribute domstring _camel_cased_attribute; }; 

http://dev.w3.org/csswg/cssom/

so can assign transition/css propriety element following:

element.style["-webkit-transition"] = "all 1s" or element.style.webkittransition = "all 1s" 

its same thing

i open browser console , type: document.body.style noticed write in css -prefix-propriety "stored" prefixpropriety

i jquery added prefixes automatically

good them