CSS3 's animationend will execute multiple times

-webkit-keyframes banner-slide-70 {0%{opacity:0;-webkit-transform:translatey (70px)} 100%{opacity:1;}} @-moz-keyframes banner-slide-70 {0%{opacity:0;-moz-transform:translatey (70px)} 100%{opacity:1;}} @-o-keyframes banner-slide-70 {0%{opacity:0;-o-transform:translatey (70px)} 100%{opacity:1;}} @keyframes banner-slide-70 {0%{opacity:0;-webkit-transform:translatey (70px);-moz-transform:translatey (70px);- Ms-transform:translatey (70px); Transform:translatey (70px);} 100%{opacity:1;}}

. Seven {    background:url (.. /common/img/sec/banner/7.png) Center bottom no-repeat;    -webkit-animation:banner-slide-70 0.8s ease-out 0.8s 1;             -moz-animation:banner-slide-70 0.8s ease-out 0.8s 1;                -o-animation:banner-slide-70 0.8s ease-out 0.8s 1;                animation:banner-slide-70 0.8s ease-out 0.8s 1;    }

For this effect, the background image will be loaded in for the first time, show it first, and then start the animation.
Finally in the CSS inside the first write opacity:0; And then animationend the event to write opacity;
However, it is found that Animationend will execute several times, and some are not executed.

The final workaround is to reset the event:

     function getwx () {var WN = {}; var BODY = Document.body | |        Document.documentelement;        var style = Body.style;        var transition = ' transition ';        var transitionend;        var animationend;                   var Vendorprefix;          Transition = Transition.charat (0). toUpperCase () + transition.substr (1);            Vendorprefix = (function () {//Now opera is also webkit var i = 0;            var vendor=[' Moz ', ' Webkit ', ' khtml ', ' O ', ' Ms '; while (I < vendor.length) {if (typeof Style[vendor[i] + transition] = = = ' String ') {RE                Turn vendor[i];            } i++;        } return false;          })();               Transitionend = (function () {var transendeventnames = {webkittransition: ' Webkittransitionend ', Moztransition: ' Transitionend ', otransition: ' Otransitionend otransitionend ', Tran       Sition: ' Transitionend '     }; for (var name in transendeventnames) {if (typeof style[name] = = = ' String ') {return Transen                Deventnames[name];          }            }        })();              Animationend = (function () {var animendeventnames = {webkitanimation: ' Webkitanimationend ',            Animation: ' Animationend '}; for (var name in animendeventnames) {if (typeof style[name] = = = ' String ') {return animend                Eventnames[name];        }            }        })();            Wn.addtranevent=function (Elem, fn, duration) {var called = false;                        var fncallback = function () {if (!called) {fn ();                    called = true;            }            }; function Hand () {Elem.addeventlistener (transitionend, function () {elem.removeevent Listener (transitionend, argumentS.callee, false);                Fncallback ();            }, False);        } setTimeout (Hand,duration);        };        Wn.addanimevent=function (ELEM,FN) {Elem.addeventlistener (Animationend, FN, false);          };        Wn.removeanimevent = function (Elem, FN) {Elem.removeeventlistener (animationend,fn,false);          };                Wn.setstyleattribute = function (Elem, Val) {if (Object.prototype.toString.call (val) = = = ' [Object Object] ') {                        for (var name in Val) {if (/^transition|animation|transform/.test (name)) {                        var stylename = Name.charat (0). toUpperCase () + name.substr (1);                    Elem.style[vendorprefix+stylename]=val[name];                    } else {Elem.style[name] = Val[name];        }                }            }        };        Wn.transitionend = Transitionend; Wn.vendorprefix = Vendorprefix        Wn.animationend = Animationend;    return WN; }

Call Mode:

var Timer;var position = $ ('. Position '); Position is the Domvar to perform the animation hasanimation = False;u.each (position, function (item, key) {    var name = $ (item). get (0); 
  
   GETWX (). Addanimevent (name, function () {        $ (item). CSS ({opacity:1});        Hasanimation = true;    })         ; Timer = setTimeout (function () {    if (!hasanimation) {        position.css ({opacity:1});}    }, 1000);
  

