Css - apply transition in scrollbar-thumb pseudo element

Question

I would like to apply a simple transition effect when hovering the mouse over the scroll-y in a div!

When I hover over the ::-webkit-scrollbar-thumb the effects are applied, except for the transition animation. Have it any specific reason? I can't apply this effect to a pseudo element? The same effect is applied to the text and it happens as expected, except on the scroll! It changes color abruptly between purple and pink.

The expected result is that when hovering over I see the transition effect on the scroll-thumb.

p {
  font-size: 20px;
  color: dark-grey;
  -webkit-transition: 1s ease;
  font-weight: bold;
}

p:hover {
  color: blue;
  -webkit-transition: 1s ease;
}

.content {
  width: 200px;
  max-height: 100px;
  border: 1px solid red;
  float: left;
  overflow-y: scroll;
}

.content::-webkit-scrollbar {
  width: 10px;
  background-color: rgb(109, 103, 109);
  border-radius: 30px;
}

.content::-webkit-scrollbar-thumb {
  background-color: rgb(90, 3, 112);
  border-radius: 30px;
  border: 1px solid black;
  -webkit-transition: 1.2s ease;
}

.content::-webkit-scrollbar-thumb:hover {
  background-color: rgb(253, 182, 194);
  -webkit-transition: 1.2s ease;
}

<div class="content">
  <p class="text-content">
    Text<br> Text
    <br> Text
    <br> Text
    <br> Text
    <br> Text
    <br> Text
    <br> Text
    <br> Text
    <br>
  </p>
</div>

The code can be also be accessed and changed here!

I tried the transition all but it doesn't work!

Answer 1

At the OP's request, here's my comment as answer again:

Unfortunately it's not possible to use transition on ::-webkit-scrollbar because it's not implemented. What you can do, however, is to use animated CSS variables, which is described here: https://stackoverflow.com/a/74050413/20896315