I'm trying to move letters individually from a word one-by-one to the right. It should look like they're being pulled to that direction from the center. Look at this pen (not mine, btw): https://codepen.io/egrucza/pen/LZdPeP .

It should be like that, except the word (in HTML) is there already and the letters should move to the right when the word is hovered on. Now look what I've got so far in my pen: https://codepen.io/jenny0515/pen/wvpdKBz . A piece here (but please click on my code pen link):

.content1 :hover {
  text-align: right;
  content: "Hair Clips";
}
.content2 :hover {
  text-align: right;
  content: "Make-up";
}
.content3 :hover {
  text-align: right;
  content: "Jewelry";
}

So, instead of the letters appearing from above or below, the word should be at the center of the row (as I have it in my code pen), and when at hover, the last letter of the word should move to the right, and the other letters by it should follow with a slight delay in between each first move.

How can I do that in CSS?

CodePudding user response：

You need to break down the elements to animate them individually.

<div >
 <span >M</span>
 <span >o</span>
 <span >v</span>
 <span >e</span>

In this CodePen I broke the letters down into spans and animate manually, there are other solutions you could use to clean up your CSS and handle the delays but this is quick and dirty.

https://codepen.io/duncanlutz/pen/XWVaBQY

CodePudding user response：

I guess you need to understand the basics first. Therefore, a simple example showing the basic concepts only.

To explain:

• Use single span elements for the letters (most important and already mentioned by others).
• letter:hover should be clear.
• The &:nth-of-type(4) part moves the 4th letter using translateX.

Two more things you should know:

• The transition property in the example you have posted is a shorthand, see here
• To my understanding, moving all letters one by one on hovering a div would require keyframes.

Note: You can only move the fourth letter on hover with this example.

HTML

<div >
    <span >H</span>
    <span >e</span>
    <span >r</span>
    <span >e</span>
</div>

CSS

$duration: 5s;

span {
    display: inline-block;
}

.letter:hover {
    &:nth-of-type(4) {
        transform: translateX(200px);
        transition-duration: $duration;
    }
}