问在增长/收缩时，是否可能对flex容器中的每个flex元素有不同的转换时间？

EN

<flex>
  <div class="item bg1" id="item-0"></div>
  <div class="item bg2" id="item-1"></div>
  <div class="item bg3" id="item-2"></div>
  <div class="item bg4" id="item-3"></div>
  <div class="item bg5" id="item-4"></div>
  <div class="item bg6" id="item-5"></div>
  <div class="item bg7" id="item-6"></div>
</flex>

body {
  margin: 0;
  overflow: hidden;
}

flex {
  margin-left: -5vw;
  display: flex;
  width: 110vw;
  height: 100vh;
  transform: skew(-10deg);
}

.item {
  flex: 1;
}

.item:hover {
  flex-grow: 3;
  max-width:45vw;
}

.bg1 {
  background: #442C59;
}
.bg2 {
  background: #844270;
}
.bg3 {
  background: #DC9A95;
}
.bg4 {
  background: #BEC976;
}
.bg5 {
  background: #CDCA98;
}
.bg6 {
  background: #B04127;
}
.bg7 {
  background: #6B4A4B;
}

// ITEM 0
$("#item-0").mouseover(function(){
  $(this).css({ transition: 'all 1s' });
  $("#item-1").css({    transition: 'all 1.2s' });
  $("#item-2").css({    transition: 'all 1.4s' });
  $("#item-3").css({    transition: 'all 1.6s' });
  $("#item-4").css({    transition: 'all 1.8s' });
  $("#item-5").css({    transition: 'all 2s' });
  $("#item-6").css({ transition: 'all 2.2s' });
});

// ITEM 1
$("#item-1").mouseover(function(){
  $("#item-0").css({ transition: 'all 1.2s' });
  $(this).css({ transition: 'all 1s' });
  $("#item-2").css({ transition: 'all 1.2s' });
  $("#item-3").css({ transition: 'all 1.4s' });
  $("#item-4").css({ transition: 'all 1.6s' });
  $("#item-5").css({ transition: 'all 1.8s' });
  $("#item-6").css({ transition: 'all 2s' });
});

// ITEM 2
$("#item-2").mouseover(function(){
  $("#item-0").css({ transition: 'all 1.4s' });
  $("#item-1").css({ transition: 'all 1.2s' });
  $(this).css({ transition: 'all 1s' });
  $("#item-3").css({ transition: 'all 1.2s' });
  $("#item-4").css({ transition: 'all 1.4s' });
  $("#item-5").css({ transition: 'all 1.6s' });
  $("#item-6").css({ transition: 'all 1.8s' });
});

// ITEM 3
$("#item-3").mouseover(function(){
  $("#item-0").css({ transition: 'all 1.6s' });
  $("#item-1").css({ transition: 'all 1.4s' });
  $("#item-2").css({ transition: 'all 1.2s' });
  $(this).css({ transition: 'all 1s' });
  $("#item-4").css({ transition: 'all 1.2s' });
  $("#item-5").css({ transition: 'all 1.4s' });
  $("#item-6").css({ transition: 'all 1.6s' });
});

// ITEM 4
$("#item-4").mouseover(function(){
  $("#item-0").css({ transition: 'all 1.8s' });
  $("#item-1").css({ transition: 'all 1.6s' });
  $("#item-2").css({ transition: 'all 1.4s' });
  $("#item-3").css({ transition: 'all 1.2s' });
  $(this).css({ transition: 'all 1s' });
  $("#item-5").css({ transition: 'all 1.2s' });
  $("#item-6").css({ transition: 'all 1.4s' });
});

// ITEM 5
$("#item-5").mouseover(function(){
  $("#item-0").css({ transition: 'all 2s' });
  $("#item-1").css({ transition: 'all 1.8s' });
  $("#item-2").css({ transition: 'all 1.6s' });
  $("#item-3").css({ transition: 'all 1.4s' });
  $("#item-4").css({ transition: 'all 1.2s' });
  $(this).css({ transition: 'all 1s' });
  $("#item-6").css({ transition: 'all 1.2s' });
});

//ITEM 6
$("#item-6").mouseover(function(){
  $("#item-0").css({ transition: 'all 2.2s' });
  $("#item-1").css({ transition: 'all 2s' });
  $("#item-2").css({ transition: 'all 1.8s' });
  $("#item-3").css({ transition: 'all 1.6s' });
  $("#item-4").css({ transition: 'all 1.4s' });
  $("#item-5").css({ transition: 'all 1.2s' });
  $(this).css({ transition: 'all 1s' });
});