CSS: Using Transform: Translate() for Animations and Position

The CSS Translate Transformation function comes in three flavors: translate(), translateX() and translateY(). It can be used to move elements around on your screen, either statically for positioning or coupled with a transition to create attention-grabbing effects. I’ve seen translate used a lot on images and sections to showcase a pull up or pull out type of effect, similar to this:

See the Pen PureCSS Pull Up by Khanh (@ironion) on CodePen.

Hooray, a pull up.

The Translate() Function

The CSS Transform property can be used with a bunch of different CSS functions to generate a variety of effects. In addition to the translate functions, you can also skew, rotate, scale and even perform some 3D functions. A typical transform property with a translate function is written like this:

.sandwich {
transform: translate(valueX, valueY);
}

In the above declaration, we’re using the transform property on the .sandwich class. The transform property takes a function as a value, that function is translate(). Within the translate function, there are two parameters, the first is a value for the X-Axis, the second is a value for the Y-Axis. Written in a functional declaration, it would look like this:

.sandwich {
width: 400px;
height: 400px;
background: #333;
transform: translate(50px, 80px);
}

The above code will statically position .sandwhich 50px from the left, and 80px from the top of its container. It’s more likely that you’ll be using translate in conjunction with transition to create an animation on mouse hover, or when detecting active, etc. than using translate for static positioning. Here’s what it would look like if we were to use translate() with a transition on hover:

.sandwich {
width: 400px;
height: 400px;
background: #333;
transition: all 0.5s ease-in-out;
}
.sandwich:hover {
transform: translate(50px, 80px);
}

In the above code, when a user hovers over .sandwhich, it will move to the right by 50px, and down by 80px. You can think of the values as adding space away from the top, left point of an element. So if we were to declare translate(100px, 400px), that means it will move the element 100px away from the left-most origin point, and 400px away from the top-most origin point.

The TranslateX() & TranslateY() Functions

TranslateX() and TranslateY() work relatively the same as Translate(), only instead of taking two parameters, they will work perfectly fine with just one. You enter in the parameter you want to move the element by either just the X-Axis or the Y-Axis. It probably goes without saying that you use TranslateX() to move elements on the X-Axis and TranslateY() to move elements on the Y-Axis. Here’s TranslateX() in action:

.oranges {
width: 400px;
height: 400px;
background: #888;
transition: all 0.5s ease-in-out;
}
.oranges:hover {
transform: translateX(50px);
}

The above code will move the element with the .oranges class 50px to the right upon a user hovering their mouse over the element. You can always move content to the left instead of the right by using negative values:

.oranges {
width: 400px;
height: 400px;
background: #888;
transition: all 0.5s ease-in-out;
}
.oranges:hover {
transform: translateX(-150px);
}

The above code will move the element with the .oranges class 150px to the left upon the user hovering their mouse over the element. Now, you don’t necessarily have to use pixels with translate, it will work perfectly fine with other types of values too such as percentages, viewport values and even ems. Here’s TranslateY() in action using percentages:

.apples {
 width: 400px;
 height: 400px;
 background: #7c7c7c;
 transition: all 0.5s ease-in-out;
 }
.apples:hover {
 transform: translateY(15%);
 }

We’re moving the element with the class of .apples down by 15% in the above code upon user mouse hover. And whatever we move down, we can also move up using negative values:

.apples {
 width: 400px;
 height: 400px;
 background: #7c7c7c;
 transition: all 0.5s ease-in-out;
 }
.apples:hover {
 transform: translateY(-25%);
 }

We’re moving .apples up by 25% up there upon user mouse hover. Play around with the values a little and see what you can get out of it. There are, of course, equivalent ways to perform translate using Javascript/jQuery too, but I always find CSS to be more straightforward when it comes to these matters. Here’s a CodePen illustrating the three Translate() functions for your perusal:

See the Pen Translate() Demo by Khanh (@ironion) on CodePen.

Styling a CSS Button Click Animation with Translate()

There’s a lot you can do with translate() and one of the more interesting things is creating a button that animates a press when the user clicks on it. For this tutorial, we’re going to use the active pseudo class to detect user clicks, and translate() to animate the button press. Let’s get started by defining our HTML:

<button>Click Here</button>

We’re creating an HTML button element and inside of that element, we have the text “Click Here”, simple enough. The CSS is where we get a little code heavy. Because button elements come pre-styled already with a lot of options that we might not necessarily want, we’re going to overwrite a lot of it so our button looks a little cleaner and more modern. I’m going for this look:

button

So we’re going to use this CSS on our button to get it styled properly:

 @import url(https://fonts.googleapis.com/css?family=Patua+One);

button {
  display: block;
  margin: 0 auto;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 10px 0px #e88372;
  font-family: 'Patua One', serif;
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  background: #faab89;
  padding: 10px 20px 10px 20px;
  width: 300px;
  transition: all 0.1s ease-in-out;
}

That’s a lot, I know. I’m building a pretty fancy button here so there’s a lot of components that will go into it. Here’s what I’m doing with the button above…

First I import my Google Fonts. Then set my button element to display: block so I can center it using margin: 0 auto on the screen. After that, I remove the default border from the button by declaring border: none, and add some slightly rounded corners using border-radius. I generate a solid shadow using the box-shadow property, normally you will want to write in browser prefixes for border-radius and box-shadow, but I trimmed that code to keep things brief.

After that, we should be in more familiar territory, I’m setting the typeface, the size of the text, the color, aligning the text in the center, forcing the text to be uppercase, removing any text decorations that it might be tempted to add, and adjusting the letterspacing because I didn’t like how it looked initially.

After that I set the color of the button using background, adjust the padding to what I like, set the width of the button, the default cursor when someone hovers over it, and finally, I apply a transition property. The one declarations that you should pay attention to most above is the box-shadow declaration. We’re going to modify that a little bit, so that when a user clicks on the button, we’ll reduce the distance of the box-shadow and make it look like the button is being pressed down.

Most of that you should be familiar with, so let’s put in our active pseudo class and animate this thing upon user click. Funny enough, we already wrote most of our code above, and it doesn’t get any more complicated than that because here’s our translate animation:

button:active {
  box-shadow: 0 1px 0 #e88372;
  transform: translateY(10px);
}

First thing I do is declare the active pseudo class on button. This detects when a user has clicked on the button element then runs our code. Within the declarations, the first thing I did was modify box-shadow, specifically its distance value, changing it from 10px to 1px. This will cause the solid shadow we have under our button to scale down from 10px to 1px upon click and therefore simulating an animated button press.

Next the transform property calls the translateY() function to move the button down by 10px. This is beneficial to us because our original box-shadow was 10px in distance, moving it down 10px lets us keep the button in alignment with the scaling down of the box-shadow so we don’t get any overlapping during the transition. When you’re done, you should have a completed button that looks like this and animates a button press upon clicking:

See the Pen PureCSS Animated Button Click by Khanh (@ironion) on CodePen.

So there you have it, the translate function in CSS used to move elements around and animate a pretty cute button upon click!

Resources

MDN Transform Property Documentation


Posted

in

by

Tags:

Comments

3 responses to “CSS: Using Transform: Translate() for Animations and Position”

  1. nice tutorial. Thank you.

  2. jsfh

    .apples {
    width: 400px;
    height: 400px;
    background: #7c7c7c;
    transition: all 0.5s ease-in-out;
    }

    1. Hi jsfh, check out codepen.com to test out your code. 🙂