I have a transition for a label on input focus, is there a way to make the transition go backward on blur?

Consider the following fiddle code

<div class="my-wrapper">
 <input type="text"
     placeholder="placeholder." >
 <label >Press enter to save</label>
</div>


.my-wrapper {
 input {
  width: 200px;
  height: 3em;
 }
 input:focus + label{
  right: 20px;
  opacity: 1;
  color: #D3D3D3;
 }

 label{
   line-height: 40px;
   position: absolute; 
   right: 160px; 
   -moz-transition: 0.3s right ease;
   -ms-transition: 0.3s right ease;
   -o-transition: 0.3s right ease;
   -webkit-transition: 0.3s right ease;
   transition: 0.3s right ease;
   z-index: 0;
   opacity: 0;
 }
}

I am seeing the forward transition on focus, I thought on blur the transition would go backwards, but I don't see it, can someone give me a hint on what I did wrong?

2 answers

  • answered 2019-06-25 07:32 Nimsrules

    You can keep this simple by using transform instead of absolute values

    .my-wrapper input {
      width: 200px;
      height: 3em;
    }
    
    .my-wrapper input:focus+label {
      transform: translateX(0);
      opacity: 1;
      color: #D3D3D3;
    }
    
    .my-wrapper label {
      position: absolute;
      right: 10px;
      line-height: 40px;
      transform: translateX(-20px);
      transition: 0.3s all ease;
      z-index: 0;
      opacity: 0;
    }
    <div class="my-wrapper">
      <input type="text" placeholder="placeholder.">
      <label>Press enter to save</label>
    </div>

  • answered 2019-06-25 08:53 Allan Jebaraj

    You have given transition: 0.3s right ease which will apply only to right property and not for opacity.

    Change the transition property to transition: 0.3s all ease and the effect fades out smoothly on blur.

    JsFiddle link