Переход CSS при удалении класса

У меня есть форма, которая функционирует как страница настроек. При изменении элементов формы они помечаются как несохраненные и имеют другой цвет границы. Когда форма сохраняется, они помечаются как сохраненные с другим цветом границы.

Я хочу, чтобы при сохранении формы граница постепенно исчезла.

Будет следующий порядок:

<input type='text' class='unsaved' /> Not saved yet, border is yellow
<input type='text' class='saved' />   Saved, so the border is green
<input type='text' class='' />        Fade out if coming from class saved

Если я смогу запустить переход CSS3 при удалении сохраненного класса , то он может исчезнуть, и все будет в порядке. В настоящее время мне приходится вручную анимировать его (конечно, с помощью плагина), но он выглядит прерывистым, и я хотел бы переместить код в CSS3, чтобы он был более плавным.

Мне это нужно только для работы в Chrome и Firefox 4+, хотя другие подойдут.

CSS:

Вот связанный CSS:

.unsaved {
    border: 3px solid #FFA500;
    padding: 0;
}
.saved {
    border: 3px solid #0F0;
    padding: 0;
}

Я хотел бы работать со следующим переходом (или чем-то подобным):

border-color: rgba(0,0,0,0);
-webkit-transition: border-color .25s ease-in;  
-moz-transition: border-color .25s ease-in;  
-o-transition: border-color .25s ease-in;  
transition: border-color .25s ease-in;

Примечание:

Лично я не согласен с этой схемой взаимодействия с пользователем, но этого хочет наш руководитель отдела программного обеспечения. Пожалуйста, не предлагайте мне изменить способ его работы в настоящее время. Спасибо!