CODEWITHSUNDEEP
csscss-animations
user783388
user783388

Reputation:

animation: move right aligned text to the right and align left

I have a tiny menu-list that should grow when the mouse comes near. In its original state, the menu is right aligned, on hover every second item moves right and gets left-aligned to make space for the increased height (see JSFiddle).

ul {
  font-size: 12px;
  transition: font-size ease 0.4s 0.4s;
  line-height: 12px;
  text-align: right;
  padding: 50px;  
  width: 500px;
  list-style-type: none;  
}

ul:hover {
  font-size: 24px;
}

li {
  height: 12px;
}

li a {
  display: block;
    text-decoration: none;
  transition: transform ease 0.8s;
  text-align: right;
}

.container:hover ul li:nth-child(even) a{
  transform: translateX(100%);
  text-align: left;
}
<div class="container">
  <ul>
    <li><a href="#">Some link</a></li>
    <li><a href="#">Some other link</a></li>
    <li><a href="#">another</a></li>
    <li><a href="#">this is the last ling</a></li>
  </ul>
</div>

The concept works so far although I will have to finetune the animation-part of it. The problem I cannot find a solution for is this: To align the items in the middle, I have to change the text-align - but that cant be animated, so at hover the items jump to left-align before starting to move. I would like to have them start at their current location.

To solve this, I think I'd need a way to keep the items right-aligned and just move them to the right by their width: transform: translateX(self:width); But I cant seem to figure out how I'd do that without javascript.

Upvotes: 1

Views: 469

Answers (1)

Hossein Shourabi
Hossein Shourabi

Reputation: 456

test it!

li {
  height: var(--menu-lineheight);
  margin-right: 50%;
  display: flex;
  justify-content: flex-end;
}

Upvotes: 1

Related Questions