动画魔法：六招教你让网页元素灵动起来

yyt_
233 阅读4分钟

一、初识网页动画：让静态元素“动”起来

大家用了掘金这么久，有没有发现，当鼠标放在头像上面，头像会旋转，然后越来越块，很有意思。下面我们介绍几种可以实现让静态元素“动”起来的方法。 屏幕录制 2025-07-22 213530.gif

二、基础动画：transition 实现平滑过渡

transition 是 CSS 动画中最基础且最常用的方式之一。它允许我们对某个 CSS 属性的变化过程进行“过渡”处理，从而实现视觉上的平滑动画效果。通过指定要变化的属性、过渡时间、缓动函数以及延迟时间，我们可以精细地控制动画的节奏和表现。

基本语法如下：

transition: [属性] [时间] [缓动函数] [延迟时间];

例如，当鼠标悬停在一个盒子上时，让它平滑地变宽并改变背景颜色：

CSS 示例代码：

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  transition: width 0.5s ease-in-out;
}

.box:hover {
  width: 500px;
  background-color: #1fb3d0;
}

在这个例子中：

  • transition: width 0.5s ease-in-out; 表示只对 width 属性应用过渡动画；
  • 0.5s 是动画持续时间为 0.5 秒；
  • ease-in-out 是缓动函数，表示动画开始和结束时较慢，中间较快，使动画更自然；
  • 鼠标悬停时，盒子的宽度和背景颜色发生变化，并通过过渡实现平滑效果。

注意：如果你希望多个属性都产生过渡效果，可以使用 transition: all 0.5s ease-in-out;，但不推荐频繁使用 all，因为它可能影响性能。

不同的缓动函数（如 linear、ease、ease-in、ease-out、ease-in-out 等）会带来不同的动画节奏，使动画更符合实际需求和视觉美感

屏幕录制 2025-07-22 214136.gif

三、图形变换：transform 实现旋转、缩放、平移与倾斜

除了属性变化，我们还可以通过 transform 实现更复杂的图形变换。它支持多种变换方式：

  • rotate()：旋转
  • scale()：缩放
  • translate()：平移
  • skew()：倾斜

这些变换可以单独使用，也可以组合使用，实现丰富的视觉效果。

transform: rotate(45deg);

image.png

四、进阶动画：使用 @keyframes 定义关键帧动画

当我们需要实现更复杂的动画流程时，@keyframes 就派上用场了。它允许我们定义一个完整的动画序列，从起始状态到结束状态，甚至包括多个中间状态。

例如，定义一个旋转动画：

@keyframes a {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

再通过 animation 属性调用这个动画：

animation: a 1s linear 0s infinite;

我们还可以实现一边旋转一边移动的动画：

@keyframes a {
  from { transform: translateX(0px) rotate(0deg); }
  to { transform: translateX(200px) rotate(360deg); }
}

屏幕录制 2025-07-22 214628.gif

五、快速实现动画：使用 animate.css 动画库

如果你希望快速实现一些常见的动画效果，而不必从头写代码，那么 animate.css 是一个非常实用的工具。它是一个现成的 CSS 动画库，提供了大量常用的动画效果，如淡入、弹跳、翻转、缩放等。

使用方法也非常简单：

  1. 安装：
npm install animate.css --save
  1. 引入：
import 'animate.css';
  1. 在 HTML 中使用：
<h1 class="animate__animated animate__bounce">An animated element</h1>

只需要加上对应的类名，就能快速为页面添加动画效果。

六、使用 react-spring 实现高级交互动画

适用场景：适用于需要物理模拟（如弹簧效果）、复杂动画序列、手势交互、动态数据绑定等场景，尤其适合 React 项目中需要高自由度动画控制的情况。

核心概念：

react-spring 是一个基于物理的动画库，提供声明式的动画 API，支持弹簧动力学、链式动画、交错动画等高级功能。它通过 useSpring、useTrail、useTransition 等钩子函数实现动画控制。

import { useSpring, animated, useTrail, useSpringRef, useChain } from '@react-spring/web';

基础示例：

以下是一个使用 useTrail 和 useChain 实现的动画组件，展示了如何对多个元素设置交错动画，并通过 useChain 控制它们的播放顺序：

jsx
浅色版本
const api1 = useSpringRef();
const [styles] = useTrail(3, () => ({
  ref: api1,
  from: { width: 0 },
  to: { width: 300 },
  config: { duration: 1000 }
}));

const api2 = useSpringRef();
const [styles2] = useTrail(3, () => ({
  ref: api2,
  from: { height: 100 },
  to: { height: 50 },
  config: { duration: 1000 }
}));

useChain([api1, api2], [0, 1], 500);

return (
  <div>
    {styles.map((style, index) => (
      <animated.div
        className="box"
        style={{ ...style, ...styles2[index] }}
        key={index}
      />
    ))}
  </div>
);

说明：

  • useTrail(n, ...)：创建一组 n 个动画，每个动画按顺序播放，常用于列表或元素组的动画。
  • useSpringRef()：创建动画引用，用于手动控制动画执行。
  • useChain([api1, api2], [0, 1], 500)：将两个动画按顺序播放，[0, 1] 表示动画之间的延迟比例，500 是整体延迟时间。
  • animated.div：包裹后的可动画组件，支持样式动态变化。

效果：

组件加载时，3 个 .box 元素会先依次展开宽度（width），之后再依次收缩高度（height），形成一个有序的交互动画序列。

avatar
文章
阅读
粉丝