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
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,676 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.