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.