Я хотел, чтобы div выглядел как 3D-сфера и переходил через цвета. Я обнаружил, что цвета фона градиента не переходят (пока). Я поместил радиальный градиентный фон перед элементом (используя z-индекс) с переходным сплошным фоном.
/* overlay */
z-index : 1;
background : radial-gradient( ellipse at 25% 25%, rgba( 255, 255, 255, 0 ) 0%, rgba( 0, 0, 0, 1 ) 100% );
, затем div.ball
внизу:
transition : all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
затем изменил цвет фона div.ball
и вуаля!