CSS fading-transition background: linear gradient, does not work

Question

A simple html element with CSS background linear-gradient.

Goal: Fade background on hover. Does not work (with transition background), see example below - Why?

ui-accordion-header {
  border: 0 none;
    font-size: 100%;
    line-height: 1.3;
    list-style: none outside none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
}

.mx-accordion h1 {
    background: linear-gradient(0deg, rgba(227,227,227,1) 20%, rgba(247,247,247,1) 100%);
    border: 1px solid #e3e3e3;
    border-width: 0 0 1px;
    color: #000;
    padding: 7px 10px;
    margin: 0px;
    
    transition: background .2s ease-in-out;
}

.mx-accordion h1:not(.ui-state-active):hover {
    background: linear-gradient(0deg, #e1ebff 20%, #e1ebff 100%);
    cursor: pointer;
    color: #027BFF;
}

<div id="accordion" class="mx-accordion ui-accordion ui-widget ui-helper-reset" role="tablist">


<h1 class="ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-4" aria-controls="my-filters" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        <a href="#">My Text</a>
    </h1>
  
  </div>

Answer 1

Transitioning gradients is not supported, as explained here.

A workaround could be, to transition the background-position and scaling the background. This way we can achieve something very similar.

div {
  background-image: linear-gradient(0deg, #e1ebff 0%, #e1ebff 25%, rgba(227, 227, 227, 1) 75%, rgba(247, 247, 247, 1) 100%);
  padding: 7px 10px;
  background-size: 100% 400%;
  background-position: 100% 0%;
  transition: .2s;
}

div:hover {
  background-position: 100% 100%;
}

<div>Lorem ipsum</div>