Use Transition on ::-Webkit-Scrollbar

use transition on ::-webkit-scrollbar?

It is fairly easy to achieve using Mari M's background-color: inherit; technique in addition with -webkit-background-clip: text;.

Live demo; 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;
  }
}

Is it possible to use keyframes animation on scrollbar thumb?

You can't use keyframes or transitions on scrollbar

Although you can achieve it by some tricky css stylings, for more information check this out

transition does not apply on scroll bar?

Pseudo selectors don't implement CSS3 transitions, yet.

Scrollbar Gradient Transition from scroll to bottom

I've edited your code a bit, I hope it's what you were looking for.

/* width */
body::-webkit-scrollbar {
  width: 19px;
}

/* Added here the linear gradient. From 0% to 100%. Use rgba for better results */
body::-webkit-scrollbar-track {
  background: linear-gradient(0deg, #ee7752, #e73c7e 0%, #23a6d5, #23d5ab 100%);
  border-color: black;
  border-radius: 20px;
}

/* Added background: transparent */
body::-webkit-scrollbar-thumb {
  background: transparent;
  animation: scroll-gradient 5s ease infinite;
  background-size: 100% 100%;
  border-radius: 20px;
  /* box shadow. If we set it to an enormous value with zero blur, it will cover all space around the scrollbar handle */
  box-shadow: 0px 0px 0px 100000vh black;
}

/* You need this? I think no. */
/*::-webkit-scrollbar-thumb:hover {
  background: #7333B1;
}*/

/*Changed size to view the changes*/
body {
  height: 150vw;
}

<body>
<h1 style="height:200px">hello</h1>
</body>

Scrollbar appears through CSS animation/transition

You need to set overflow:hidden in the body css. But note that, adding this will hide all overflown contents including the vertical scroll bar and you dont want to do that since the page contents will be hidden if the height is overflown. So if you are using a slide transition (sidewards) and you only want to hide the horizontal scroll bar that appears during transition, then use this instead:

 body {
    overflow-x:hidden;  
}

This way, you are only hiding the horizontal scroll bar and the vertical scroll bar will still work.

CSS Adding Second Transition

Visibility toggles instantly, hence executing before any transitions. The .slider is visible before the animation, when it's supposed to scroll up, and it's hidden before the animation, when it's supposed to scroll down.

Translations over top comes with a performance issue. I changed the change in height to transform: translateY instead.

You can only animate properties that are numbers, like hexcolors and ... well, ordinary numbers. So I hide the .slider by changing it's opacity.

The second parameter in opacity 1ms 0.5s is a delay of 0.5 seconds.

I honestly suggest using another solution, because your .slider will be at the bottom of the page, and it's still clickable. So I added pointer-events: none when .slider isn't focused.

I also corrected your javascript code, putting "var" in front of your declaration and changed i (now: sliderOpen) to a boolean.

var sliderOpen = true;

function focusInput() {
  document.getElementById("infoButton").focus();
}
function blurInput() {
  document.getElementById("infoButton").blur();
}
function check() {
  if (sliderOpen) {
      focusInput()
  } else {
      blurInput()
  }

  sliderOpen = !sliderOpen;
}

Also, you don't need that javascript code. The CSS is enough to toggle your .slider. So I removed it and everything still works.

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

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: #eeeeee;
}

.settings {
  float: left;
  width: 35%;
  margin-top: 5px;
  text-align: right;
}

.settings .infoButton img {
  margin-top: -15px;
  margin-left: -5px;
  width: 15px;
}

.settings .infoButton {
  height: 20px;
  width: 20px;
  margin-top: 5px;
}

.slide {
  text-align: left;
  z-index: 999;
  position: absolute;
  height: 100px;
  left: 0;  
  background-color: #161618;

  /* CHANGED or ADDED */
  bottom: 0;
  right: 0;
  transition: transform 0.5s, opacity 1ms 0.5s;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.infoButton:focus + .slide {
  /* CHANGED or ADDED */
  opacity: 1;
  transform: translateY(0%);
  transition: transform 0.5s, opacity 1ms;
  pointer-events: auto;
}

<div class="settings">
  <button id="infoButton" class="infoButton"><img src="https://pics.freeicons.io/uploads/icons/png/7410416951552644391-512.png" alt="settings icon"></button>
  <div class="slide">
    <p>Hello</p>
  </div>
</div>

How can I hide a scrollbar smoothly?

Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.

See this JSFiddle.

This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.

Use Transition on ::-Webkit-Scrollbar