Яркость div элемента?

Question

[Nwton]

1) На сайте, при обновлении баланса, div элемент со значением баланса как бы один раз сверкает, а затем возвращается в исходный цвет.
2) Делается это при помощи изменения значения opacity.
3) Сам сайт в темных тонах и под div с балансом все темное. Поэтому, что бы достичь осветления (а не затемнения), при изменении opacity, под div с балансом незаметно подложен еще один div с фоном #fff.

Все работает, но это самый настоящий костыль.
Как можно сделать иначе, что бы достичь того же результата?

+Можно было бы просто изменять цвет фона div с балансом на более светлый, но тут важен сам эффект сверкания, анимация. Переход должен быть плавным.

Answer 1

[Максим Тимофеев]

А почему не менять цвет backgroud так же плавно как вы меняете opacity?

Comments

[Nwton]

Мне тогда придется сначала подобрать пару десятков #xxx и подставлять их параметру back color один за другим? Как-то не рационально.

Или я не правильно понял?

[Максим Тимофеев]

Nwton:

div {background:red; transition: all .5s ease;}
div:hover {background:green;}

где тут пара десятков #xxx?

[Nwton]

Максим Тимофеев: не подумал про такой вариант, спасибо!

[Егор Рублёв]

А про какой вы подумали?:)

[Nwton]

Егор Рублёв: представил как я в зависимости от тайминга подставляю определенный цвет из массива. Сейчас эффект блика, с изменением opacity, работает полностью на js :))))))))))) Анимация средствами одного css мне в голову не приходила

[Егор Рублёв]

Nwton: От просто к сложному, придерживайтесь принципа =)

Answer 2

[Сергей delphinpro]

Причепите css transition на бэкграунд. Кривыми Безье в тайминг-функции подберите оптимальный эффект вспышки.
Переключайте из скрипта присвоением/удалением класса.