.col2 {
   flex: 1;
   height: 300px;
   margin: 5px;
   border:1px solid black;
   z-index: 1;
   text-align: right;

}

.flex-grid {
   display: flex;
}

# box1:hover {

  animation: 1s forwards;
  background-color: red;
  animation-name: example;
}

@keyframes example {
  from {min-width: 0;}
  to {min-width: 99vw}
}

<div class="flex-grid">
  <div class="col2" id="box1"></div>
  <div class="col2" id="box2"></div>
</div>

您需要将动画添加到给定项（或通用项），即。

# box1:hover {

  background-color: red;
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
  from {min-width: 0;}
  to {min-width: 100vw}
}

修改@joelbonter的答案以使用jquery，您可以使用mouseover和mouseleave事件捕获悬停事件。

$('.col2').on('mouseover', function(){
  $(this).css({
    'animation': '1s forwards',
    'background-color': 'red',
    'animation-name': 'example'
  });
  //hide other divs
  $(this).siblings().fadeOut();
});

$('.col2').on('mouseleave', function(){
  $(this).css({
    'animation-name': 'none',
    'background-color': 'white'
  });
  //show other divs
  $(this).siblings().fadeIn();
});

.col2 {
   flex: 1;
   height: 300px;
   margin: 5px;
   border:1px solid black;
   z-index: 1;
   text-align: right;

}

.flex-grid {
   display: flex;
}

@keyframes example {
  from {min-width: 0;}
  to {min-width: 99vw}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-grid">
  <div class="col2" id="box1"></div>
  <div class="col2" id="box2"></div>
</div>