Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by jsdevtom
jsdevtom
16,963 Points

Why is "-webkit-transform" a valid value of the transition property? What does it do?

From this excerpt of the code: 

.wrap {
   transition: -webkit-transform 1s ease-in;
}

1 Answer

Jeremy Canela
.a{fill-rule:evenodd;}techdegree seal-36
Jeremy Canela
Full Stack JavaScript Techdegree Graduate 30,766 Points

-webkit- is a vendor prefix. It's used for browser support. If a browser doesn't fully support something like transorm, you'll need to include the vendor prefix for the browser. -webkit- is a vendor prefix for Google Chrome, newer versions of Opera, and I believe Safari also. Other browsers use different vendor prefixes:

  • -webkit- (Chrome, newer versions of Opera.)
  • -moz- (Firefox)
  • -o- (Old versions of Opera)
  • -ms- (Internet Explorer)

Example:

.wrap {
    transition: -webkit-transform 1s ease-in; /* Chrome, Opera, and Safari */
    transition: -moz-transform 1s ease-in; /* Firefox */
    transition: -o-transform 1s ease-in; /* Old versions of Opera */
    transition: -ms-transform 1s ease-in; /* Internet Explorer */
    transition: transform 1s ease-in; /* If the browser supports it, this will work fine without the prefix */
}

More info here :)

jsdevtom
jsdevtom
16,963 Points

Thank you :-) -Also, found this

Jeremy Canela
.a{fill-rule:evenodd;}techdegree seal-36
Jeremy Canela
Full Stack JavaScript Techdegree Graduate 30,766 Points

awesomedude I realize now that you were asking what -webkit-transform does, my bad. Here you'll find good information about CSS3 transforms. I'm sure it explains it better then I would :)