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

HTML Introduction to HTML and CSS (2016) Getting Familiar with HTML and CSS Building Web Pages with HTML and CSS

Cameron Scully
Cameron Scully
2,919 Points
Posted by Cameron Scully
Cameron Scully
2,919 Points

Transform movement - How is it so smooth and not simply from scale 1 to whatever value you enter?

I am just wondering as to how, when the image is told to transform, continues to grow in size rather than instantly become that size. What line in the code helps to communicate this command?

1 Answer

Dan Weru
Dan Weru
47,649 Points
Dan Weru
Dan Weru
47,649 Points

Hello, to make the increase smooth rather than instant, you would need to use an easing function and adding time to the transform. For instance you could say

img{ 
  transition: transform 0.5s ease-out;
}
img:hover{
  transform: scale(1.5);
}

The above code would scale the image to 1.5 times it’s set size over a duration of 0.5 seconds using the ease-out timing function. This happens when you hover on the image.

To get a better grasp of this, have a look at this transitions and transforms course by Guil.

Of course that’s one way of doing it, css animations is another way. That said, these animations build on the knowledge on transitions and transforms.