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.
Instructor: [00:00] Here I have my transforms.html file. It contains three sections with each section having a title, a button, and an image of a cat.
[00:08] I have added some JavaScript to this application to ensure our CSS classes and the button labels are appropriately changed when the buttons are clicked.
[00:15] We're going to add three transition functions to the elements on this page. The first transition we'll add is translateX. This moves an element horizontally. When we click the button, a new class, translateX, will be appended to the cat image node.
[00:28] Let's go ahead and add a translateX of a 100 pixels. When we click the button, we can see that the cat moves 100 pixels. When we click it again to reset it, it jumps back. This is because we're appending and removing the translateX class name from the image node.
[00:41] This transformation was a bit sudden, so let's add a transition function. Transition functions make your animations more fluid. They take the CSS property you want to transition, the length of the transition, and the timing function. For our timing function, we'll use ease-in, which starts out slowly and gets faster as the animation progresses.
[00:58] Now let's translate the Y-image. This will follow the same process as X-translation. First, we'll add the transform with the translateY a 50 pixels.
[01:06] Now let's add the transition function on the image. This time, we'll use ease-out, which starts out fast and decelerates as the animation's coming to an end. Now when we click the translateY button, the cat moves down and up.
[01:18] We can also transform with the X- and Y-values simultaneously by using the translate shortcut. This takes the X-transition value first and then the Y-transition value second.
[01:28] Finally, we'll add a transition function of linear, which maintains the same speed throughout the entire transition. When we click the button, the cat moves down and to the right. That's it. Now you know how to use the translate functions.
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!
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?