Dúvida no transition-property: background

Olá, companheiros Basicamente criei um estilo para este elementocom degradê e tudo mais, porém percebo que o transition está ignorando as propriedades background do meu código. O que acontece é que com o mouse passando por cima do elemento, o background se ajusta instantaneamente e somente os demais valores assumem o efeito gradativo.

#submit{
    height: 44px;
    background-color: hsl(15, 100%, 67%);
    background-image: linear-gradient(to top, hsl(14, 100%, 67%), hsla(15, 90%, 72%, 80%));
    border: none;
    padding-bottom: 16px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: bold;
    box-shadow: -2px -2px 12px hsl(15, 100%, 72%),
                inset 2px 2px 8px hsl(15, 100%, 72%),
                inset -4px -4px 16px hsla(15, 80%, 40%, 20%),
                inset 1px 1px 2px hsla(15, 100%, 85%, 50%),
                8px 8px 16px hsla(15, 80%, 40%, 0.12);
    transition: all 0.3s linear,
                   background 1s linear;
}

#submit:hover{
    color: hsl(35, 90%, 25%);;
    background-color: hsl(45, 100%, 67%);
    background-image: linear-gradient(to top, hsl(44, 100%, 67%), hsla(44, 90%, 72%, 80%));
    box-shadow: -2px -2px 12px hsl(45, 100%, 72%),
                inset 2px 2px 8px hsl(45, 100%, 72%),
                inset -4px -4px 16px hsla(45, 80%, 40%, 20%),
                inset 1px 1px 2px hsla(15, 100%, 85%, 50%),
                8px 8px 16px hsla(45, 80%, 40%, 0.12);

Mesmo reduzindo o código acima apenas para propriedade 'background-color' o efeito não funciona como o esperado. Acontece que sempre que adiciono a palavra 'background' como valor para transition, ela fica vermelha no meu editor de código (Visual Studio Code), como se estivesse inválida.

Se souberem me esclarecer de alguma maneira, já será bastante válido. Obrigado!