css - CSS表单样式使边框在点击时淡化

Question

什么是最好的 CSS 来使文本输入边框在单击或关闭时淡入/淡出？

我现在有这个显示边框的CSS，但我想要一种方法让它淡入/淡出而不是仅仅出现

.cbp-mc-form input,
.cbp-mc-form textarea {
    border: 3px solid #ffffff;
    border:1px solid #f36f25;
}

Answer 1

input {
    border: 3px solid #ddd;
    transition: all .3s linear;
    outline: 0;
}

input:focus {
    border: 3px solid #f36f25;
}

演示