css3動畫效果抖動解決

div{
      height: 20%;
   }
  @keyframes shanghua{
    from{
      height: 0%;
    }
    to{
      height: 60%;
    }
  }
  div:hover{
    animation: shanghua 1s linear forwards;
  }

從div上部或側邊滑過期div時會出現抖動現象，而且動畫不能正常顯示高度變爲60%，緣由是從上部或側部滑過的同時動畫效果生效，height變爲0%，而此時鼠標就處於div外部的狀態，hover不能生效，所以完整動畫不能正常顯示，使div出現抖動效果height一直在20%到0%之間抖動。解決辦法將@keyframes的from中的height屬性設置爲20%便可解決