I would like my text to appear from left to right and disappear from left to right as well-CodePudding

I made a simple text with a transition, appearing from left to right when I hover it in CSS.

My code is very simple, as seen in the snippet.

So of course, when I remove my mouse cursor, it is animated in the other direction and the text disappears from right to left. BUT I'd like it to disappear from left to right and then reset so it can appear again from left to right, and that's where I'm stuck.

What would be your approach to get such an effect?

Thanks!

.text{
    transition: max-width 700ms linear;
    max-width: 0%;
    overflow: hidden;
    white-space: nowrap;
}

.container:hover .text{
    max-width: 100%;
}

.container{
    padding: 10px 0 10px 0;
    width: fit-content;
}

<div >
<div >THIS IS MY TEXT</div>
</div>

CodePudding user response：

I managed to do it, thanks to A Haworth for pointing me in the right direction. I now need to retrieve the actual clip-path value so when the mouse is not over before the end of the animation, it doesn't 'jump' like this. I guess I'll need some JS here if this is even possible to do.

.text{
    animation: out linear 700ms forwards;
}

.container:hover .text{
    animation: in linear 700ms;
}

.container{
    padding: 10px 0 10px 0;
    width: fit-content;
    animation: reveal 700ms linear;
}

@keyframes in {
    0% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

@keyframes out {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
    }
}

@keyframes reveal {
    0%,
    99% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

<div >
<div >THIS IS MY TEXT</div>
</div>

CodePudding user response：

   <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe, praesentium.</p>
  
.text{
        transition: max-width 700ms linear;
        opacity: 0;
        height: 20px;
        overflow: hidden;
        max-width: 0px;
    }
    
    .text:hover{
        opacity: 1;
        max-width: 100%;
    }

CodePudding user response：

You could use CSS animations for this - in the non-hovered state the text moves to left: 100% position and in the hovered state it moves from the -100% position to the 0 position.

If you do this with transitions (rather than setting position left) then the container will maintain the width of the child text.

The wrinkle with this approach is that the very first time, ie onl oad, the text can be seen going from left to right. To get round this this snippet has a little bit of a hack, the container has opacity 0 for the fist 700ms of the page's life and then is seen.

.text {
  display: inline-block;
  width: fit-content;
  animation: out linear 700ms forwards;
  transform: translateX(100%);
}

@keyframes out {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

.container:hover .text {
  transform: translateX(0%);
  animation: in linear 700ms;
}

@keyframes in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}

.container {
  padding: 10px 0 10px 0;
  width: fit-content;
  rheight: fit-content;
  animation: reveal 700ms linear;
  overflow: hidden;
}

@keyframes reveal {
  0%,
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div >
  <div >THIS IS MY TEXT</div>
</div>