<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    div{
      width: 300px;
      height: 300px;
      background: red;
      position: relative;
      top: 0;
      /*-webkit-animation: ani 1s*/
    }
    /*div:hover div{*/
    /*-webkit-animation: ani 1s*/
    /*}*/

    .aa{
      -webkit-animation: ani 1s
    }
    
    @-webkit-keyframes  ani{
      0%{

        top: 0;
      }
      90%{

        top: 50px;

      }
      100%{
        top: 60px;

      }
    }
  </style>
</head>
<body>
  <div>

  </div>
  <script src="js/jquery-1.11.3.js">

  </script>
  <script>
    $('div').mouseenter(function(){
      $(this).addClass('aa');
    })
    $('div').mouseleave(function(){
      $(this).removeClass('aa')
    })
  </script>
</body>
</html>

跟transition效果js实现方式一样，把animation的属性放到独立的一个样式中，鼠标进入添加该属性，即触发keyframe关键帧动画