尝试一下》

          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #main {
      width: 350px;
      height: 100px;
      border: 1px solid #c3c3c3;
      display: flex;
    }

    #main div {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 300px;
    }

    #myBlueDiv {
      animation: mymove 5s infinite;
      /*Safari 和 Chrome:*/
      -webkit-animation: mymove 5s infinite;
    }

    @keyframes mymove {
      50% {
        flex-shrink: 8;
      }
    }
    /*Safari 和 Chrome:*/

    @-webkit-keyframes mymove {
      50% {
        flex-shrink: 8;
      }
    }
  </style>

</head>
<body>

  <p>"blue DIV" 的 flex-shrink 属性逐渐地从 1 变化到 8，然后再变回 1：
    <p>

      <div id="main">
        <div style="background-color:coral;">红色 DIV</div>
        <div style="background-color:lightblue;" id="myBlueDiv">蓝色 DIV</div>
      </div>

      <p>在 CSS 中，flex-shrink 属性是 <em>可动画化（animatable）</em> 的。</p>

      <p>Internet Explorer 10、Firefox 和 Opera 支持 CSS 动画。</p>
      <p>Safari 和 Chrome 通过带有前缀 -webkit-，支持 CSS 动画。</p>

</body>
</html>
        
尝试一下 》
