How to hide/show the unit to work fade?

Good afternoon. There are two blocks that appear and disappear according to a certain condition.
Each unit consists of an inner svg element and pseudo-element :after.

It is necessary that their appearance / disappearance was gradual.

Here's an example of styles:

.horizontal-scrollbar {
 &__buttons {
 position: relative;
}

 &__button-left {
 position: absolute;
 top: 20px;
 left: 0;
 opacity: 0;

 .icon {
 position: relative;
 fill: $blue;
 height: rem(25);
 width: rem(25);
 transform: rotate(270deg);
 cursor: pointer;
 z-index: $zi-layer-2;

 &:hover {
 transform: rotate(270deg) scale(1.2);
}
}

 &:after {
 position: absolute;
 top: -30px;
 left: 0;
 display: block;
 content: ";
 width: rem(100);
 height: rem(90);
 background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0.20));
 z-index: $zi-layer-1;
}

 &.is-visible {
 opacity: 1;
}
}

 &__button-right {
 position: absolute;
 top: 20px;
 right: 0;
 opacity: 0;

 .icon {
 position: relative;
 fill: $blue;
 height: rem(25);
 width: rem(25);
 transform: rotate(90deg);
 cursor: pointer;
 z-index: $zi-layer-2;

 &:hover {
 transform: rotate(90deg) scale(1.2);
}
}

 &:after {
 position: absolute;
 top: -30px;
 right: 0;
 display: block;
 content: ";
 width: rem(100);
 height: rem(90);
 background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0.20));
 z-index: $zi-layer-1;
}

 &.is-visible {
 opacity: 1;
}
}

 &__content {

}
}

buttons: horizontal-scrollbar__button-left and horizontal-scrollbar__button-right hidden by default. When they add the class is-visible. they, along with the class element icon and :after should gradually appear. And similarly, deleting a class is visible to disappear.

Again I'm only interested in the styles to give a smooth, the rest is all there.

Thanks in advance.