Как сделать плавное исчезновение бордера у формы?

Question

[Danya_Podolskij]

Плавное появление я сделал, а вот исчезновение...

form {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background-color: #ECEFF1;
  }
  input, button {
    outline: none;
    background: transparent;
  }
  input {
    width: 100%;
    height: 32px;
    padding-left: 10px;
    border: 1px solid #ECEFF1;
  }
  button {
    border: none;
    height: 32px;
    width: 32px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }
  button:before {
    content: "\f002";
    font-family: FontAwesome;
    font-size: 16px;
    color: #111111;
  }
  input:focus {
    border-color: #111111;
    transition: border 0.7s ease-out;
  }

Answer 1

[Максим Иванов]

transition: border 0.7s ease-out;
Вырежи эту строку и вставь в button

Comments

[Максим Иванов]

А куда ты хочешь? На инпут? Тогда в него

[Максим Иванов]

А лучше выгрузи всё на codepen и кинь ссылку

[Danya_Podolskij]

Не работает

[Максим Иванов]

Danya_Podolskij, выгрузи всё на codepen!

[Danya_Podolskij]

Максим Иванов, https://codepen.io/Danya_Podolskij/pen/NWzwzGQ?edi...

[Максим Иванов]

Ну так...

input {
    width: 100%;
    height: 32px;
    padding-left: 10px;
    border: 1px solid #ECEFF1;
    font-size: 13px;
    transition: border 0.7s ease-out;
  }