Реализовать растущую и уменьшающуюся анимацию панели вкладок с помощью CSS и JS

Question

Я очень плохо знаком с CSS и веб-технологиями в целом, и я должен внедрить индикатор панели навигации с вкладками. Прямо сейчас у меня это работает правильно, используя переходы для анимации. Например:

What I have:
From tab 2 to tab 3
Start of animation
| T1 | T2 | T3 |
      ----
Middle of animation
| T1 | T2 | T3 |
        ----
End of animation
| T1 | T2 | T3 |
           ----

What I want:
From tab 2 to tab 3
Start of animation
| T1 | T2 | T3 |
      ----
Middle of animation
| T1 | T2 | T3 |
      --------- (Grow from prev tab to next tab)
End of animation
| T1 | T2 | T3 |
           ---- (Shrink to selected tab)

Все плавно анимировано. Я реализовал то, что у меня есть, используя CSS, добавив переход на поле, которое меняется в зависимости от того, какая вкладка выбрана. Я попытался добавить еще один отложенный переход, чтобы реализовать то, что я хочу, но когда я добавляю классы для перехода (я использую Enyo), кажется, что оба применяются одновременно, и ни один из них не работает должным образом. Я добавляю оба, класс с переходом, который начинается немедленно, и класс с задержкой, которая начинается, когда заканчивается анимация первого, но я предполагаю, что это не поддерживается в CSS.

Что было бы хорошим способом реализовать это? Желательно одноразовое. Благодарю.

Редактировать: некоторый код:

adjustSlider: function(){
    if(this.vote == 1){
        this.$.slider.addClass('slider-up-start slider-up-end');
        this.$.slider.removeClass('slider-down-start slider-down-end');

    }
    if(this.vote == -1){
        this.$.slider.addClass('slider-down-start slider-down-end');
        this.$.slider.removeClass('slider-up-start slider-up-end');
    }
},

 .slider-up-start{
background-color: #27AE60;
width: 100%;
margin-left: 0%;
height: .3em;
-webkit-transition: margin-left .3s, width .3s, background-color .3s;
    transition: margin-left .3s, width .3s, background-color .3s;
}

.slider-up-end{
width: 50%;
transition: width .3s;
transition-delay: .3s;
}

.slider-down-start{
background-color: #C0392B;
width: 100%;
margin-left: 0%;
height: .3em;
-webkit-transition: margin-left .3s, background-color .3s;
    transition: margin-left .3s, background-color .3s;
}

.slider-down-end{
width: 50%;
margin-left: 50%;
transition: width .3s, margin-left .3s;
transition-delay: .3s;
}

Я просто сейчас проверяю переход, а не webkit. Я не думаю, что применение обоих классов (один с задержкой) работает так, как я надеялся.