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

デモ