css动画与js动画效果图

CSS 动画和 JS 动画都是用于在网页上创建动态效果的技术，它们各有优势和特点。

基础概念：

• CSS 动画：通过 CSS 规则定义元素的动画效果，利用关键帧和过渡属性来实现。
• JS 动画：使用 JavaScript 代码来控制元素的样式和位置，以实现动画效果。

优势：

• CSS 动画：
  • 性能较好，浏览器可以对其进行优化。
  • 简单易实现，适合简单的动画效果。
  • 可以直接由 CSS 控制，不需要额外的脚本。
• JS 动画：
  • 灵活性强，可以实现复杂的动画效果和交互。
  • 可以精确控制动画的时间和速度。
  • 可以与用户的操作进行实时响应。

类型：

• CSS 动画：
  • 过渡动画：通过 transition 属性实现简单的属性变化动画。
  • 关键帧动画：使用 @keyframes 规则定义动画的关键帧。
• JS 动画：
  • 基于定时器的动画：如 setTimeout 和 setInterval。
  • 使用动画库：如 jQuery 动画、GSAP 等。

应用场景：

• CSS 动画：
  • 页面元素的简单渐变、移动等效果。
  • 常见的 UI 动效，如按钮点击效果、导航栏切换等。
• JS 动画：
  • 复杂的交互式动画，如游戏中的角色移动。
  • 数据可视化中的动态图表展示。

常见问题及原因：

• CSS 动画：
  • 动画卡顿：可能是由于浏览器在处理复杂的样式计算或布局导致的。
  • 兼容性问题：不同浏览器对 CSS 动画的支持程度可能有所不同。
• JS 动画：
  • 性能问题：频繁操作 DOM 可能会导致页面重绘和回流，影响性能。
  • 时间控制不准确：使用定时器可能出现时间累积误差。

解决方法：

• CSS 动画：
  • 优化动画性能：尽量减少动画元素的层级和复杂度，使用硬件加速（如 transform: translateZ(0)）。
  • 解决兼容性问题：使用前缀或 CSS 动画库来处理不同浏览器的差异。
• JS 动画：
  • 使用 requestAnimationFrame 来优化动画性能，它会在浏览器重绘之前调用指定的回调函数。
  • 精确控制时间：可以使用时间戳来计算动画的进度，避免定时器的误差。

以下是一个简单的 CSS 动画示例，实现一个元素在 2 秒内从左向右移动：

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s linear infinite;
}

以下是一个简单的 JS 动画示例，实现一个元素在 2 秒内从左向右移动：

const box = document.querySelector('.box');
let start = null;

function step(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;
  const x = (progress / 2000) * 200;
  box.style.transform = `translateX(${x}px)`;
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

希望以上内容能帮助您理解 CSS 动画和 JS 动画的相关知识！