Why does the animation work every time?

Question

css

Hello, I made small tabs in which animation is supposed, namely, by clicking on the tab, the content elements converge to the center

. For some reason, the animation works every other time.

Help find the cause.

Link to tabs

/* ------------------------>>> Вкладки Возможностей Владельца/Продавца <<<------------------------------------------------- */
  (function(){

    var $tabSection = $('.poss__section'),
      $tabsHeader = $('.poss__headerListItem');

    $(document).on('click', '.poss__headerListItem', function(e){
      e.preventDefault();
      var $this = $(this),
        target = '#' + $this.attr('data-id');

      $tabsHeader.removeClass('active');
      $this.addClass('active');
      $tabSection.removeClass('active');
      $(target).addClass('active');
    });

  })();
  /* ------------------------>>> > Вкладки Возможностей Владельца/Продавца End <<<------------------------------------------------- */

.poss__section .poss__image {
    position: absolute;
    display: block;
    bottom: 0;
    right: 100%;
}

.poss__section.active .poss__image {
    right: 0;

    -webkit-transition: all .6s ease 1s !important;
    -moz-transition: all .6s ease 1s !important;
    -o-transition: all .6s ease 1s !important;
    transition: all .6s ease 1s !important;
}

.poss__section {
    display: none;
}

.poss__section.active {
    display: block;
}