Как сделать плавную анимацию появления вкладок?

Question

[LastGeneral]

Есть простые вкладки на 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");

Как сделать анимацию плавного появления с права вкладки, при переключении?

Answer 1

[Lord_Dantes]

Добавить key-frames и плавную анимацию к ним. После чего добавить кейфреймы в классы активации вкладок.