I am currently experimenting with moving letters individually from a word to the right, one by one. The effect I am going for is as if they are being pulled in that direction from the center. You can check out this cool pen (not mine, btw): https://codepen.io/egrucza/pen/LZdPeP.
What I want to achieve is similar to that, where the word is already present in HTML and when hovered over, the individual letters move to the right. Here's what I have accomplished so far in my pen: https://codepen.io/jenny0515/pen/wvpdKBz. Below is a snippet of code (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";
}
My goal is to make it such that when hovering, instead of the letters appearing from above or below, the word remains at the center of the row (as shown in my code pen). Upon hover, the last letter of the word should move to the right first, followed by the other letters with a slight delay between each movement.
How can I achieve this effect using CSS?