使用Mari M的background-color: inherit;技术和-webkit-background-clip: text;技术可以很容易地实现。
现场演示; https://jsfiddle.net/s10f04du/

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  .container {
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: rgba(0,0,0,0);
    -webkit-background-clip: text;
    transition: background-color .8s;
  }
  .container:hover {
    background-color: rgba(0,0,0,0.18);  
  }
  .container::-webkit-scrollbar-thumb {
    background-color: inherit;
  }
}

这里有另一个基于回复的想法。你可以使用color代替background-color，然后使用box-shadow来给拇指上色。你可以使用-webkit-text-fill-color来给文本上色：
https://codepen.io/waterplea/pen/dVMopv

*::-webkit-scrollbar-thumb {        
  box-shadow: inset 0 0 0 10px;
}

div {
  overflow: auto;
  -webkit-text-fill-color: black;
  color: rgba(0, 0, 0, 0);
  transition: color .3s ease;
}

div:hover {
  color: rgba(0, 0, 0, 0.3);
}

**简答：**不能，不能在::-webkit-scrollbar上使用transition
**详细回答：**在CSS中有完全实现类似效果的方法。
说明：

1.我们需要创建一个可以滚动的外部容器，然后创建一个内部容器。
1.外部容器将有一个background-color属性。这个属性将匹配我们想要为滚动条过渡的颜色。
1.内容器将与外容器的高度相匹配，并且将具有遮蔽外容器的background-color。
1.滚动条的background-color将继承外部容器的。

1. transition属性将应用于外部容器的background-color。
   这里的一个主要缺点是你必须做一些遮罩。如果你的背景不是纯色，这可能有点麻烦，因为内部容器很可能需要匹配。如果这不是一个担心，这将为你工作。下面的代码将所有这些放在一起，用于一个带有 * 水平 * 滚动组件的页面。

超文本标记语言

<div id="container-outer">
    <div id="container-inner">
        <!-- Content goes here -->
    </div>
</div>

CSS

/* Scrollbar */
    ::-webkit-scrollbar {
        border: 0;
        height: 10px;
    }
    ::-webkit-scrollbar-track {
        background: rgba(0,0,0,0);
    }
    ::-webkit-scrollbar-thumb {
        background-color: inherit; /* Inherits from outer container */
        border-radius: 20px;
    }

    /* Container */
    #container-outer {
        overflow-y: hidden;
        overflow-x: scroll; /* Horizontal-only scrolling */
        height: 400px;
        background-color: white; /* Initial color of the scrollbar */
        transition: background-color 200ms;
    }
    #container-outer:hover {
        background-color: red; /* Hover state color of the scrollbar */
    }
    #container-inner {
        background-color: white; /* Masks outer container */
        font-size: 0;
        height: inherit; /* Inherits from outer container */
        width: 10000px; /* Set to see the scrolling effect */
    }

备注：

• 这应该是显而易见的，但这是一个Webkit解决方案。这个问题是专门关于Webkit的，而不是其他任何东西，所以这个答案只是关于Webkit的。
• 你的外部容器可能需要一个max-width来匹配你的内部容器的width，否则你可能会在超大的显示器上看到一些奇怪的东西。当浏览器的宽度大于水平滚动的内容宽度时，这是一个极端的情况。这是假设你使用的是水平滚动，就像示例代码所做的那样。
• 在大多数情况下，悬停样式在移动的上无法正常工作。考虑到Webkit移动浏览器的巨大市场渗透率，这是一个问题。在使用此解决方案之前，请考虑这一点。

根据@brillout的回答，如果我们转换border-color而不是background-color，我们可以避免使用background-clip: text，如果您有任何嵌套文本，则会留下一些片段。
详细说明：
1.把你的内容放在一些 Package 器div中，然后在你的 Package 器上添加一个到border-color的过渡来改变悬停时的颜色。
1.在滚动条中添加一个内嵌边框，并将其宽度设置为足以填充整个元素。
1.在滚动条上设置border-color: inherit。
现在，当我们将鼠标悬停在 Package 器上时，边框颜色会发生变化。 Package 器没有边框，所以我们看不到任何变化。但是，滚动条继承了该颜色，所以滚动条颜色会发生变化。
下面是最重要的代码。完整的示例可以在this fiddle和下面的代码片段中找到。

#scroller {
  /* fill parent */
  display: block;
  width: 100%;
  height: 100%;

  /* set to some transparent color */
  border-color: rgba(0, 0, 0, 0.0);
  /* here we make the color transition */
  transition: border-color 0.75s linear;
  /* make this element do the scrolling */
  overflow: auto;
}

#scroller:hover {
  /* the color we want the scrollbar on hover */
  border-color: rgba(0, 0, 0, 0.1);
}

#scroller::-webkit-scrollbar,
#scroller::-webkit-scrollbar-thumb,
#scroller::-webkit-scrollbar-corner {
  /* add border to act as background-color */
  border-right-style: inset;
  /* sum viewport dimensions to guarantee border will fill scrollbar */
  border-right-width: calc(100vw + 100vh);
  /* inherit border-color to inherit transitions */
  border-color: inherit;
}

<div id="scroller">...</div>

body {
  background: whitesmoke;
}

#wrapper {
  width: 150px;
  height: 150px;
  margin: 2em auto;
  box-shadow: 0 0 15px 5px #ccc;
}

#scroller {
  /* fill parent */
  display: block;
  width: 100%;
  height: 100%;
}

#content {
  display: block;
  width: 300px;
  height: auto;
  padding: 5px;
}

#scroller {
  /* The background-color of the scrollbar cannot be transitioned.
     To work around this, we set and transition the property
     of the wrapper and just set the scrollbar to inherit its
     value. Now, when the the wrapper transitions that property,
     so does the scrollbar. However, if we set a background-color,
     this color shows up in the wrapper as well as the scrollbar.
     Solution: we transition the border-color and add a border-right
     to the scrollbar that is as large as the viewport. */
  border-color: rgba(0, 0, 0, 0.0);
  transition: border-color 0.75s linear;
  /* make this element do the scrolling */
  overflow: auto;
}

#scroller:hover {
  border-color: rgba(0, 0, 0, 0.1);
  transition: border-color 0.125s linear;
}

#scroller::-webkit-scrollbar,
#scroller::-webkit-scrollbar-thumb,
#scroller::-webkit-scrollbar-corner {
  /* add border to act as background-color */
  border-right-style: inset;
  /* sum viewport dimensions to guarantee border will fill scrollbar */
  border-right-width: calc(100vw + 100vh);
  /* inherit border-color to inherit transitions */
  border-color: inherit;
}

#scroller::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

#scroller::-webkit-scrollbar-thumb {
  border-color: rgba(0, 0, 0, 0.1);
  /* uncomment this to hide the thumb when not hovered */
  /* border-color: inherit; */
}

#scroller::-webkit-scrollbar-thumb:hover {
  border-color: rgba(0, 0, 0, 0.15);
}

#scroller::-webkit-scrollbar-thumb:active {
  border-color: rgba(0, 0, 0, 0.2);
}

<div id="wrapper">
  <div id="scroller">
    <div id="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pretium mi felis, pharetra ornare lorem pellentesque pulvinar. Donec varius condimentum nunc at mollis. Pellentesque posuere et quam eu tristique. Integer interdum enim non interdum mattis. Suspendisse gravida nibh enim, non efficitur lacus suscipit quis. Etiam pharetra libero auctor ultricies ornare. Duis dapibus semper semper. Nam sit amet lobortis arcu.

  Maecenas fermentum risus quis justo convallis, non ornare erat fringilla. Cras eleifend leo sapien, ac iaculis orci ultricies sed. Praesent ultrices accumsan risus, pharetra pharetra lorem dignissim id. Aenean laoreet fringilla eros, vel luctus eros luctus sed. Nullam fermentum massa sit amet arcu dictum, nec bibendum lectus porta. Duis pellentesque dui sed nisi ultricies, vitae feugiat dui accumsan. Nam sollicitudin, ex et viverra ultricies, justo metus porttitor quam, quis vestibulum nibh nisl eget leo.

  Integer luctus arcu et sapien accumsan fringilla. Integer mollis tellus vel imperdiet elementum. Ut consequat ac nibh ac sagittis. Duis neque purus, pellentesque nec erat id, pharetra ornare sapien. Etiam volutpat tincidunt nunc ac facilisis. Aenean sed purus pellentesque, vehicula mauris porta, fringilla nibh. Ut placerat, risus et congue rutrum, lorem arcu aliquet urna, sollicitudin venenatis lorem eros et diam. Aliquam sodales ex risus, ac vulputate ipsum porttitor vel. Pellentesque mattis nibh orci. Morbi turpis nulla, tincidunt vitae tincidunt in, sodales et arcu. Nam tincidunt orci id sapien venenatis porttitor ut eu ipsum. Curabitur turpis sapien, accumsan eget risus et, congue suscipit ligula.

  Maecenas felis quam, ultrices ac ornare nec, blandit at leo. Integer dapibus bibendum lectus. Donec pretium vehicula velit. Etiam eu cursus ligula. Nam rhoncus diam lacus, id tincidunt dui consequat id. Ut eget auctor massa, quis laoreet risus. Nunc blandit sapien non massa bibendum, ac auctor quam pellentesque. Quisque ultricies, est vitae pharetra hendrerit, elit enim interdum odio, eu malesuada nibh nulla a nisi. Ut quam tortor, feugiat sit amet malesuada eu, viverra in neque. Nullam lacinia justo sit amet porta interdum. Etiam enim orci, rutrum sit amet neque non, finibus elementum magna. Sed ac felis quis nunc fermentum suscipit.

  Ut aliquam placerat nulla eget aliquam. Phasellus sed purus mi. Morbi tincidunt est dictum, faucibus orci in, lobortis eros. Etiam sed viverra metus, non vehicula ex. Sed consectetur sodales felis, vel ultrices risus laoreet eget. Morbi ut eleifend lacus, ac accumsan risus. Donec iaculis ex nec ante efficitur vestibulum.
    </div>
  </div>
</div>

一个干净的解决方案可以通过在背景中使用的CSS变量的动画来实现。请注意，为了能够动画CSS变量，您需要使用@property设置它们。

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

@property --var1 {
  syntax: "<color>";
  inherits: true;
  initial-value: white;
}

@keyframes fadeIn {
  0% {
    --var1: white;
  }

  100% {
    --var1: #aaa;
  }
}

@keyframes fadeOut {
  0% {
    --var1: #aaa;
  }

  100% {
    --var1: white;
  }
}

.container {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  animation: fadeOut .5s ease-in-out forwards;
}

.container:hover {
  animation: fadeIn .5s ease-in-out forwards;
}

.container::-webkit-scrollbar {
  background: white;
  width: 8px;
}

.container::-webkit-scrollbar-thumb {
  background: var(--var1);
  border-radius: 4px;
}

<div class="container">
  test
  <div style="height: 1000px; width:100%;"></div>
</div>

我被@waterplea的回答所启发。
默认情况下，文本阴影会继承文本颜色。使用此功能可以很好地实现我想要的效果。

.a {
  width: 100px;
  height: 200px;
  overflow-y: scroll;
  border: 1px solid #a3a3a3;

  transition: color 800ms;
  /* Initial color of scroll bar */
  color: rgba(8, 114, 252, 0.452);
}
.a span {
  /* Prevent content text from inheriting colors. */
  color: #000;
}

.a:hover {
  color: rgb(8, 114, 252);
}

.a::-webkit-scrollbar {
  appearance: none;
  width: 10px;
}

.a::-webkit-scrollbar-thumb {
  /* The box-shadow inherits the text color by default. */
  box-shadow: inset 0 0 0 20px;
  border-radius: 50px;
}

<div class="a">
  <span>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione, odio. Lorem ipsum dolor sit, amet consectetur
    adipisicing elit. Ratione, odio. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione, odio. Lorem ipsum
    dolor sit, amet consectetur adipisicing elit. Ratione, odio.
  </span>
</div>

让scrollbar继承容器的background-color并使用transition更改容器background-color也可以。但它有一个缺点，即容器的背景颜色也会改变。这使得该方法非常不可用。您可以使用内部容器和掩蔽来避免这个问题，但它太多了。
相反，您可以通过在容器上使用background-image来避免这个缺点，以便在改变background-color之后容器的背景不会改变。

.transparent-scrollbar::-webkit-scrollbar {
  width: 16px;
}

.transparent-scrollbar::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

.transparent-scrollbar {
  /* background-image is set to solid linear gradient to make sure that the background of the container stays the same regardless of the change in the background-color property. This makes transition for the background-color possible without affecting the container's background.*/
  background-image: linear-gradient(white, white);
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.transparent-scrollbar:hover {
  background-color: #babac0;
  transition: background-color 0.3s ease;
}

.transparent-scrollbar::-webkit-scrollbar-thumb {
  background-color: inherit;
  border-radius: 8px;
  border: 4px solid transparent;
  background-clip: content-box;
  transition: background-color 0.3s ease;
}

Codepen示例：https://codepen.io/sbijay777/pen/poxvGdB