JSFiddle - React, Tailwind, and code Playground

HTML

<img/>

CSS

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
img {width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */

JavaScript

$(document).on("animationstart", function(){
                   alert('started');
                }); 


(function( $, window, document, undefined ) {

        // Function options

        var methods = {
            init   :  function( options ) {
                return this.each(function (){
                    methods.start(this, options);
                });
            },
            start  :  function( el, options ) {

                // Attach animationstart to selector

                $(document).on("animationstart", el, function(){
                    options.start.call();
                });

            }
        }

        // Plug-in code

        $.fn.plugin = function( options ) {
            if ( methods[options] ) {
                return methods[options].apply( this, Array.prototype.slice.call( arguments, 1 ));
            } else if ( typeof options === "object" || ! options ) {
                return methods.init.apply( this, arguments );
            } else {
                $.error( "Method" + options + " does not exist in plugin" );
            }

        };
    })( jQuery );


    // Attach to DOM object


    $('img').plugin({
      'start'  :  function(){
          console.log('Animation started');
      }
    });