docs/animation-effect-techniques

动画效果技术概述

动画效果是现代网页设计中不可或缺的一部分，它能够提升用户体验，增加视觉吸引力。以下是一些常见的动画效果技术：

1. CSS3 动画

CSS3 提供了丰富的动画效果，如 transition、animation 和 keyframes。

• 过渡效果 (Transition): 用于在两个状态之间平滑地过渡。
• 关键帧动画 (Keyframes): 定义动画的每个阶段，实现复杂的动画效果。
• 动画 (Animation): 通过定义动画的持续时间、延迟、迭代次数等属性来实现。

示例代码：

/* 过渡效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}

div:hover {
  width: 200px;
}

/* 关键帧动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

div {
  animation: rotate 2s infinite;
}

2. JavaScript 动画

JavaScript 提供了更强大的动画控制能力，可以通过 requestAnimationFrame、setTimeout 或 setInterval 等方式实现。

示例代码：

function animate() {
  var div = document.getElementById('div');
  div.style.left = (parseInt(div.style.left) + 5) + 'px';
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

3. 帧动画

帧动画通过连续播放多张图片来实现动画效果，常用于游戏开发。

示例代码：

<img src="image1.png" alt="Image 1">
<img src="image2.png" alt="Image 2">
<img src="image3.png" alt="Image 3">

扩展阅读

想要了解更多关于动画效果的技术，可以阅读本站的《CSS 动画教程》。

CSS 动画效果示例