title: How to add a additional hover effect to scroll-bar
body: <p>In my css I have changed the style of sroll bar and it looks like</p>
  <pre><code>body::-webkit-scrollbar {
    width: 0.7em;
  }
  body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(154,165,159,0.5);
  }
  body::-webkit-scrollbar-thumb {
    background-color: #D0CACD;
    outline: 1px solid LightGrey;
    box-shadow: 7px 7px 50px grey;
  }
  </code></pre>
  <p>It works. And if I add hover:</p>
  <pre><code>body::-webkit-scrollbar-thumb:hover {
    background-color: #b8c0bc; 
  }
  </code></pre>
  <p>Then also it works when I add the webkit animation to it then why does it not works. After adding webkit animation then it totally looks like:</p>
  <pre><code>body::-webkit-scrollbar-thumb:hover {
    background-color: #b8c0bc;
    -webkit-animation: scrollbig 1s; 
    animation: scrollbig 2s; 
  }
  </code></pre>
  <p>The animation does not play. Why ? I am using google chrome. And you can also see the <code>@keyframe</code> animation code:</p>
  <pre><code>@-webkit-keyframes scrollbig {
    from {width: 0.6em;}
    to {width: 0.9em;}
  }
  </code></pre>
  <p>Please tell how to make the animation works.
  A Special Thanks.</p>