У меня есть переход для метки на фокусе ввода, есть ли способ сделать переход назад при размытии?

Question

Рассмотрим следующий код скрипты

<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;
 }
}

Я вижу прямой переход на фокусе, я думал, что при размытии переход будет идти назад, но я его не вижу,может кто-нибудь подсказать мне, что я сделал не так?

Answer 1

Вы указали transition: 0.3s right ease, который будет применяться только к right свойству, а не к opacity.

Измените свойство перехода на transition: 0.3s all ease, и эффект размывается при размытии.

JsFiddle link

Answer 2

Вы можете сделать это проще, используя transform вместо абсолютных значений

.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>