How to make a smooth animation of the appearance of tabs?

Question

css

There are simple tabs in JS:

<div class="content">
  <ul class="tabs">
    <li class="tabs_item">Вкладка 1</li>
    <li class="tabs_item">Вкладка 2</li>
    <li class="tabs_item">Вкладка 3</li>        
  </ul>
  <div class="tabs_content">
    <div class="tabs_content-item">Контент вкладки 1</div>
    <div class="tabs_content-item">Контент вкладки 2</div>
    <div class="tabs_content-item">Контент вкладки 3</div>
  </div>
</div>

.tabs {
  display: flex;
}
ul li {
   list-style-type: none;
}
.tabs_item.active {
    background-color: red;
    border: 1px solid blue;
}

jQuery(".tabs_content-item").not(":first").hide();
jQuery(".tabs_item").click(function() {
  jQuery(".tabs_item").removeClass("active").eq($(this).index()).addClass("active");
  jQuery(".tabs_content-item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active");

How to make a fade animation to the right of a tab when switching?

Answer 1

Add key-frames and smooth animation to them. Then add keyframes to the tab activation classes.