不同浏览器对CSS3动画的支持度不同，如何优雅降级？

/* 基本版本：所有浏览器都能支持的简单动画 */
.basic-animation {
  transition: all 0.3s ease;
}

/* CSS3动画：仅在支持的浏览器上生效 */
@keyframes advanced-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.advanced-animation {
  animation: advanced-animation 1s ease infinite;
}

// 检测浏览器是否支持CSS3过渡
function supportsTransitions() {
  var b = document.body || document.documentElement;
  var s = b.style;
  var p = 'transition';
  if(typeof s[p] == 'string') {return true; }

  var v = ['Moz', 'webkit', 'Webkit', 'Khtml', 'O', 'ms'];
  p = p.charAt(0).toUpperCase() + p.substr(1);
  for(var i=0; i<v.length; i++) {
    if(typeof s[v[i] + p] == 'string') { return true; }
  }
  return false;
}

// 如果不支持CSS3过渡，则使用JavaScript模拟
if (!supportsTransitions()) {
  document.addEventListener('DOMContentLoaded', function() {
    var elements = document.querySelectorAll('.basic-animation');
    for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('mouseover', function() {
        this.style.opacity = '0.5';
      });
      elements[i].addEventListener('mouseout', function() {
        this.style.opacity = '1';
      });
    }
  });
}

.advanced-animation {
  animation: advanced-animation 1s ease infinite;
  transform: translateZ(0);
}