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