Изменить цвет фона с помощью анимации Angular

Я хочу изменить цвет фона градиента на другой при нажатии кнопки. Вот пример из Angular Документы, как показано ниже. Этот код отлично работает с обычными цветами (меняется медленно в течение 1000 мс - как я хочу -), но не для цветов градиента (изменяется сразу после 1000 мс).

animations: [
    trigger('heroState', [
      state('black', style({
         background: 'linear-gradient(to right, #2c2d34, #242424)'
      })),
      state('green',   style({
         background: 'linear-gradient(to right, #2c2d34, #467a5e)'
      })),
  transition('black => green', animate('1000ms ease-out')),
  transition('green => black', animate('1000ms ease-in'))
])


<section class = "bg-area" [@heroState] = "state"></section>