css3 动画兼容写法

CSS3动画是现代Web开发中必不可少的一部分。它可以让网站更加生动有趣，更加吸引人。但是一旦我们开始使用动画，我们就会发现不同浏览器对动画的支持不同。为了解决这个问题，我们需要找到一种兼容不同浏览器的写法。

/* 第一种兼容写法，使用浏览器前缀 */
@-webkit-keyframes move {
    0% { left: 0; }
    100% { left: 100px; }
}
@-moz-keyframes move {
    0% { left: 0; }
    100% { left: 100px; }
}
@-o-keyframes move {
    0% { left: 0; }
    100% { left: 100px; }
}
@keyframes move {
    0% { left: 0; }
    100% { left: 100px; }
}

div {
    animation: move 1s linear;
    -webkit-animation: move 1s linear; 
    -moz-animation: move 1s linear; 
    -o-animation: move 1s linear; 
}

这里我们使用了四种不同浏览器的前缀，分别是webkit（Chrome、Safari）、moz（Firefox）、o（Opera）和不加前缀的通用写法。这种写法确保了在不同浏览器下都能正常显示动画。

/* 第二种兼容写法，使用JavaScript */
// 判断浏览器是否支持CSS3动画
function isAnimationSupported() {
    var elm = document.createElement('div');
    var animations = {
        'animation':'animationend','-o-animation':'oAnimationEnd','-moz-animation':'animationend','-webkit-animation':'webkitAnimationEnd'
    };
    for(var animation in animations){
        if( elm.style[animation] !== undefined ){
            return animations[animation];
        }
    }
    return false;
}

var animationEnd = isAnimationSupported();

// 添加动画
if(animationEnd) {
    var element = document.getElementById('myDiv');
    element.classList.add('animate');
    element.addEventListener(animationEnd,function() {
        element.classList.remove('animate');
    });
}

第二种方法则是使用JavaScript，通过检查浏览器是否支持动画，并添加事件监听器，来添加动画效果。这种方法虽然需要更多的JavaScript代码，但如果我们要同时增加其他动作，比如点击事件等，就可以在这里一并处理。