前端动画

gif 动画

  1. 定义：GIF 文件的数据是一种基于 LZW 算法的连续色调的无损压缩格式，gif 格式的特点是一个 gif 文件可以存多幅彩色图像，当数据逐幅读出并展示都在屏幕上，就可以构成一个简单的动画；最高支持 256 种颜色，由于这种特性，GIF 比较适用于色彩较少的图片，比如页面卡通 icon、标志等等；

  2. 优点：

    1. 制作的成本很低；
    2. 兼容性好；
    3. 方便开发使用；

  3. 缺点：

    1. 画质上：色彩支持少，图像毛边严重；
    2. 交互上：不能控制动画的播放暂停，没有灵活性；
    3. 大小上：由于是无损压缩，每帧被完整的保存下来，导致文件很大；

  4. 效果展示

CSS 动画

css3 的 transition 过渡动画

css3 的 animation 动画

JavaScript 动画

  1. JS 动画通过定时修改元素样式实现，支持复杂的逻辑控制 （如根据用户交互、数据动态调整动画），核心方式有：setTimeout/setInterval、requestAnimationFrame；

  2. JS 动画特点：

    1. 优点：完全可控，支持物理引擎、条件判断、动态参数；
    2. 缺点：若逻辑复杂，可能导致性能下降 （需优化）；

  3. 案例：

SVG 描边动画

  1. SVG （可缩放矢量图形） 内置动画标签，适合矢量图形 （如图标、路径、图形元素） 的动画，支持路径动画、形状变形等；

  2. 核心 SVG 动画标签：

    标签 作用
    <animate> 基础属性动画 （如位置、颜色）
    <animateTransform> 变换动画 （旋转、缩放、位移）
    <animateMotion> 路径动画 （沿自定义路径移动）

  3. SVG 动画特点：

    1. 优点：矢量无损缩放，支持复杂路径动画，可直接修改 SVG 节点；
    2. 缺点：仅适用于 SVG 图形，兼容性需注意 （IE9+）；

  4. 案例：

Canvas 动画

选型建议

动画场景 推荐方式
简单状态切换 （hover、显隐） CSS Transition
循环 / 多阶段静态动画 CSS Animation
复杂逻辑控制 （物理效果、交互） JS + requestAnimationFrame
矢量图形 / 图标动画 SVG 动画
游戏 / 粒子 / 数据可视化 Canvas 动画
快速实现复杂预制动画 Animate.css/GSAP/Lottie

动画案例

3D加载动画

霓虹灯

无限滚动

购物车抛物线动画

loading 动画

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

你好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 前端动画
    1. 1.1. gif 动画
    2. 1.2. CSS 动画
      1. 1.2.1. css3 的 transition 过渡动画
      2. 1.2.2. css3 的 animation 动画
    3. 1.3. JavaScript 动画
    4. 1.4. SVG 描边动画
    5. 1.5. Canvas 动画
  2. 2. 选型建议
  3. 3. 动画案例
    1. 3.1. 3D加载动画
    2. 3.2. 霓虹灯
    3. 3.3. 无限滚动
    4. 3.4. 购物车抛物线动画
    5. 3.5. loading 动画