How to make smooth scrolling of tab content?

Question

css

Hello, please help, there are tabs, they can be flipped like a slider.
But I would like the scrolling of the content of the tabs to be smooth. Please help me to do it. Thank you very much in advance

ul.tabs li.current{
  color: red; 
}

.tab-content{
  display: none;
}

.tab-content.current{
  display: inherit;
    border: 1px solid green;
}

<div class="tabs">
    <button class="tab_nav" id="next_left"> <- </button>
    <button class="tab_nav" id="next_right"> -> </button>
    <ul class="tabs">
        <li class="tab-link current" id="link-1" data-tab="tab-1">One</li>
        <li class="tab-link" id="link-2" data-tab="tab-2">Two</li>
        <li class="tab-link" id="link-3" data-tab="tab-3">Three</li>
    </ul>
    <div id="tab-1" class="tab-content current">
        content 1
    </div>
    <div id="tab-2" class="tab-content">
        content 2
    </div>
    <div id="tab-3" class="tab-content">
        content 3
    </div>              
</div>

$(document).ready(function(){
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');
        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    });
});

$(document).ready(function(){
    $('.tab_nav').click(function(){
        if(this.id == 'next_left') {
            $d = 'l';
        }
        if(this.id == 'next_right') {
            $d = 'r';
        }
        $max = document.getElementsByClassName('tab-link').length;
        $currentlink = document.getElementsByClassName('current')[0].id;
        $arraylink = $currentlink.split('-');
        $curlink = $arraylink[1];
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');
        if ($d == 'l') {
            if ($curlink == 1) {
                $link = "#link-"+ $max;
                $tab = "#tab-"+ $max;
            }
            else {
                $link = "#link-" + ($curlink-1);
                $tab = "#tab-" + ($curlink-1);
            }
        }
        else if ($d == 'r' ) {
            if ($curlink == $max) {
                $link = "#link-1";
                $tab = "#tab-1";
            }
            else {
                $link = "#link-" + (parseInt($curlink)+1);
                $tab = "#tab-" + (parseInt($curlink)+1);
            }
        }
        $($link).addClass('current');
        $($tab).addClass('current');
    });
});

Answer 1

For example add a class

.t05{
 -webkit-transition: all 0.5s ease;
  -webkit-transition-delay: 0.5s;
  transition: all 0.5s easy;
  transition-delay: 0.5s; 
}

here pen is working