Move HTML Elements along the X and Y Axes with CSS Translations
CSS translations are the foundation of CSS animations. They allow you to move, or translate, elements along the X and Y axes. In this lesson, we'll learn how to use the CSS translate functions along with some introductory CSS transitions to smooth out the transformations.
I like this video, short & sweet and succinct. I do have a question though. Why did you use two seperate classes, one for the transform, and one for the transition?
Was it just to separate it out so its easier to digest or is there a semantic reason for it?
I like this video, short & sweet and succinct. I do have a question though. Why did you use two seperate classes, one for the transform, and one for the transition?
Was it just to separate it out so its easier to digest or is there a semantic reason for it?
Hi thanks so much for your comment! The reason I have two separate classes is as follows:
The only CSS I want the cat image to have when the browser loads is a transition. We have set this to transition a transform, which means that any time a transform occurs, let's transition it so it looks nicer.
If I had added the transform directly on the cat element, it would have transformed the cat as soon as the page rendered. Instead, we only want the cat to move when the button is clicked.
Ideally I would have liked to toggle the CSS attribute of setting transform when the button is clicked (in the let's go state), and removing the transform when we click the button again (in the reset state). Unfortunately there is no easy way to toggle a CSS attribute from JavaScript.
That being said, there IS an easy way to toggle a class name with JavaScript: (.toggle(<<CLASSNAME>>).
This is why I chose to have a separate class name with the transform function, to apply the transformation, and subsequently remove it.
I hope that clarifies it!