Transition centered text to left / right edges without overflowing

Question

I was able to transition text-align from center to left. With this code, if you run it, then hover over, you'll see the top one goes to the left. However the bottom overflows on the right; how can I figure out how to make the transition to right not overflow?

Note: This is a demo of my real application, which has strings/elements of unknown/variable width, from 1 to anything to fill a single line (no wrapping).

.header {
  position: fixed;
  width: 70%;
  background-color: springgreen;
}
.title {
  text-align: center;
}
.menu {
  text-align: center;
}
.trans-left {
  transition: margin-right 1s;
}
.trans-right {
  transition: margin-left 1s;
}
.header:hover .trans-left {
  margin-right: 100%;
}
.header:hover .trans-right {
  margin-left: 100%;
}

<body>
  <div class='header'>
    <div class='title'>
      <span class='trans-left'>This one goes left</span>
    </div>
    <div class='menu'>
      <span class='trans-right'>This one goes right</span>
    </div>
  </div>
</body>

score 2 · Accepted Answer · edited May 23 '17 at 12:32

You're aligning the text elements like this:

margin-left: 100%;
margin-right: 100%;

This positions each element – from the starting point of the box – to the left and right edges.

Hence, the left edge of the left-moving box will align with the left edge of the container.

And the left edge of the right-moving box will align with the right edge of the container. This causes the rest of this box to overflow.

Try this instead:

margin-right: 90%; /* adjust as needed */

Edit based on revised question

Here is an alternative solution that works regardless of content width.

.header {
  position: fixed;
  width: 70%;
  background-color: springgreen;
}
.title, .menu {
  text-align: center;
  position: relative;
  width: 100%;
  height: 50px;
}
.trans-left {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: 1s;
}
.trans-right {
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  transition: 1s;
}
.header:hover .trans-left {
  left: 0;
  transform: translateX(0);
  transition: 1s;
}
.header:hover .trans-right {
  right: 0;
  transform: translateX(0);
  transition: 1s;
}

<div class="header">
  <div class="title">
    <span class="trans-left">This one goes left</span>
  </div>
  <div class="menu">
    <span class="trans-right">This one goes right</span>
  </div>
</div>

More details: Element will not stay centered, especially when re-sizing screen

Hi Michael, yes if I reduce the percentage it will work, however the width is not known, this is a small example of what I am applying this to, which is hundereds, and they are all different widths. So 70% will work for a 20+ character string, but it wont work for 1 character string. :( — Noitidart, Jul 27 '16 at 20:26
Wow thanks very much @Micahel I will play with it, this new method seems much better! It works for more then just text. Thank you! — Noitidart, Jul 28 '16 at 10:56
Your way is so good! It respects the transition time 100% thank you so much! The `margin-right` method would push it to 100% but the transition time was not respected, as the 100% be overflow. Wow thank you! — Noitidart, Jul 28 '16 at 15:56

Transition centered text to left / right edges without overflowing

1 Answers1

Linked