// 标准CSS属性动画
$("#element").animate({
  opacity: 0.5,
  left: "+=50px"
}, 1000);

// 使用jQuery SVG插件示例
$("#svgElement").svg().animate({
  svgWidth: 200,
  svgHeight: 200,
  svgFill: "#ff0000"
}, 1000);

// 原生JavaScript实现SVG属性动画
function animateSVGAttribute(element, attribute, from, to, duration) {
  const startTime = performance.now();
  const delta = to - from;
  
  function update(time) {
    const elapsed = time - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const currentValue = from + delta * progress;
    
    element.setAttribute(attribute, currentValue);
    
    if (progress < 1) {
      requestAnimationFrame(update);
    }
  }
  
  requestAnimationFrame(update);
}

// 使用示例
const circle = document.getElementById("myCircle");
animateSVGAttribute(circle, "r", 10, 50, 1000);

<!-- 直接在SVG中使用SMIL动画 -->
<svg>
  <circle cx="50" cy="50" r="10" fill="red">
    <animate attributeName="r" from="10" to="50" dur="1s" repeatCount="indefinite"/>
  </circle>
</svg>

/* 通过CSS变量间接动画SVG属性 */
circle {
  --radius: 10;
  r: var(--radius);
  transition: --radius 1s;
}

circle:hover {
  --radius: 50;
}

// 使用CSS变量控制SVG属性
const svgElement = document.getElementById("svgElement");
const startRadius = 10;
const endRadius = 50;
const duration = 1000;

function animateRadius(timestamp) {
  const progress = Math.min((timestamp - startTime) / duration, 1);
  const currentRadius = startRadius + (endRadius - startRadius) * progress;
  
  svgElement.style.setProperty('--radius', currentRadius);
  
  if (progress < 1) {
    requestAnimationFrame(animateRadius);
  }
}

let startTime = performance.now();
requestAnimationFrame(animateRadius);

circle {
  r: var(--radius, 10);
}