CSS3의 animationend가 여러 번 실행됩니다.

-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;
    
}

이 효과를 위해 배경 이미지가 처음으로 로드되고 먼저 표시된 다음 애니메이션이 시작됩니다.
마지막으로 CSS에 opacity: 0;을 쓴 다음 animationend 이벤트에 opacity를 씁니다.
하지만 animationend가 여러 번 실행되고 일부는 아직 실행되지 않습니다.

최종 해결책은 이벤트를 재설정하는 것입니다:

     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 () {//现在的opera也是webkit
            var i = 0;
            var vendor=['Moz', 'Webkit', 'Khtml', 'O', 'ms'];
            while (i < vendor.length) {
                if (typeof style[vendor[i] + transition] === &#39;string&#39;) {
                  return vendor[i];
                }
                i++;
            }
            return false;
        })();
  
        transitionEnd = (function () {
            var transEndEventNames = {
              WebkitTransition: &#39;webkitTransitionEnd&#39;,
              MozTransition: &#39;transitionend&#39;,
              OTransition: &#39;oTransitionEnd otransitionend&#39;,
              transition: &#39;transitionend&#39;
            };

            for(var name in transEndEventNames){
                if(typeof style[name] === &#39;string&#39;){
                    return transEndEventNames[name];
                }
            }
        })();
  
        animationEnd = (function(){
            var animEndEventNames = {
              WebkitAnimation: &#39;webkitAnimationEnd&#39;,
              animation: &#39;animationend&#39;
            };

            for(var name in animEndEventNames){
                if (typeof style[name] === &#39;string&#39;){
                    return animEndEventNames[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.removeEventListener(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) === &#39;[object Object]&#39;){
                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;
    }

호출 방법:

var timer;
var position = $('.position'); // position 就是要执行动画的DOM
var 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);