Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
Iulia Copaci
5,039 PointsHi guys, I can't seem to understand how we can "transition the transform"?
I can't seem to understand how we can "transition the transform" by using the -webkit-transform as a value of the transition property, like so:
.wrap {
transition: -webkit-transform 1s ease-in;
}
Can anybody explain the concept better? Thanks!
1 Answer
Chris Shaw
26,662 PointsHi Lulia,
The following is MDNs summary of the transition property.
The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element. Different states may be defined using pseudo-classes like
:hoveror:activeor dynamically set using JavaScript.
Essentially transitions are like animations however, one key difference is unlike an animation which we declare; a transition requests the browser to create this animation in the background so when our CSS gets executed the transition gets triggered whenever the specified property(ies) change from their original set value.
In this case assigning -webkit-transform as the transition-property tells the browser that only for this property meaning Safari, Chrome and Opera, do we want an animation to occur between the old and new values, for any other transform property this animation wouldn't occur so it would just be a static change you see in your browser.
The other values such as 1s define the amount of time the transition should occur for and ease-in tells the browser the animation should only have easing when entering the transition but not coming out of it.
Hope that helps.