Как подсветить текст в input при нажатии на кнопку?

Question

[Steely]

Есть input и кнопка сохранить, хочу чтобы пользователь понимал что прошло сохранение (мало места чтобы писать надписи). Как сделать чтобы инпут или текст внутри стал зеленым и потом медленно затух до обычного цвета?

Используется бутстрап, спасибо!

Answer 1

[Stalker_RED]

Анимация с плавным изменением цвета:

@keyframes green-flash {        
  from { color: lightgreen; }
  to { color: inherit; }      
}

.make-it-flash {
  position: relative;
  animation: green-flash 3s ease;
}

Функция для перезапуска анимации:

function restartAnimation(elem, classname) {
  elem.classList.remove(classname);
  void elem.offsetWidth;
  elem.classList.add(classname);
}

Все в сборе: https://jsfiddle.net/zn1z16gk/
https://jsfiddle.net/zn1z16gk/1/ вариант с фоном
https://jsfiddle.net/zn1z16gk/2/ с цветной тенью