Animating the location of objects is one of the most common types of animation. It’s interesting to animate this way because you need to keep in mind how each of the element’s interact with each other to constitute a page.

This is part 4 of my series on animation. Check out the other parts of this series!

• Part 1 — Animatable: Border
• Part 2 — Animatable: Box Model
• Part 3 — Animatable: Text

This post goes along well with this Codepen demo{.broken_link}, I’ll reference it multiple times in this post. Now onto animations!

background-position

• Accepts keywords, percentages, or lengths
• Offset-x | Offset-Y
• Initial Value: 0% 0%

Background-position sets where the background is relative to it’s background-origin. In the Codepen demo (#1), you can see the background image scrolling horizontally.

position with left, right, top, bottom

• Accepts length, percentage, or some keywords
• Initial value: auto

The left, right, top, and bottom properties require the position to be set to something other than static. When you add a value to any of these properties just imagine that value pushing the element on that side. For example: for “left: 2rem” imagine that the element is being pushed on the left side by 2rem, making it move to the right 2rem. In the demo (#2), the box is being pushed in a square path.

vertical-align

• Accepts keywords, percentages, or lengths (Negative values allowed)
• Initial Value: baseline

Vertical-align sets how vertically the inline element or text is compared to the baseline. In the Codepen demo (#3), the question has its vertical align being manipulated which causes the “Maybe” to bounce up and down.

z-index

• Accepts any integer value
• Initial Value: auto

If elements overlap, z-index determines which element appears on top. If the z-index is the same, then it is controlled by source order. In the demo (#4), The z-index of the biggest box changes, revealing what is under it.

Conclusion

By animating the location of an element, it opens up a whole bunch of different opportunities. Using motion, you can signify that the user has indeed pressed the button, instead of what would otherwise leave them there clicking on the button multiple times thinking that nothing has happened. Using motion, you can bring a webpage that would’ve otherwise been boring to life. Use these animations to work, and I’ll be back with another animatable post soon!

The links

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position https://developer.mozilla.org/en-US/docs/Web/CSS/left https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align https://developer.mozilla.org/en-US/docs/Web/CSS/z-index https://docs.webplatform.org/wiki/css/properties/background-position{.broken_link} https://docs.webplatform.org/wiki/css/properties/left{.broken_link} https://docs.webplatform.org/wiki/css/properties/vertical-align{.broken_link} https://docs.webplatform.org/wiki/css/properties/z-index{.broken_link}