如何单击具有CSS动画的div？

Question

My div has a onclick function , and my css has an webkit translate animation

<div class="ant animate" onclick="myFunction()"> </div>

my script have a console log but doesn't trigger

.animate{
  -webkit-animation: food 30s linear infinite;

}
.ant {
  width: 90px;
  height: 90px;
  background:black;
   pointer-events: none;
   z-index: 3000
}


@-webkit-keyframes food {
  0% {
    -webkit-transform: translate(0px,1000px);
  }
  100% {
    -webkit-transform: translate(0px,-1000px);

  }
}

my plnk is similar but with jquery http://plnkr.co/edit/Qv1T4t9thBj8EIpdJUSH

if i unbind my animation this click works perfect

Answer 1

The alert appears in the latest versions of firefox, and safari.

The movement works in safari, chrome but not in firefox.

In Chrome I get the following error:

    Refused to execute script from 
    'https://raw.github.com/furf/jquery-ui-touch-punch/
    master/jquery.ui.touch-punch.js' 
    because its MIME type ('text/plain') is not executable, 
    and strict MIME type checking is enabled. 

I would say instead of linking to the raw.github address, download and host the file yourself.