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

对于这样的效果，背景图片会首次就加载进来，先show一下，再开始动画。
最后在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] === 'string') {
 return vendor[i];
 }
 i++;
 }
 return false;
 })();
 
 transitionEnd = (function () {
 var transEndEventNames = {
 WebkitTransition: 'webkitTransitionEnd',
 MozTransition: 'transitionend',
 OTransition: 'oTransitionEnd otransitionend',
 transition: 'transitionend'
 };

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

 for(var name in animEndEventNames){
 if (typeof style[name] === 'string'){
 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) === '[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;
 }

调用方式：

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