css @keyframes动画定义

2026-04-20 17:00:09 419阅读 0评论

用@keyframes做出生动的CSS动画：从心跳到呼吸的自然过渡

在网页上，动画不一定要炫技，关键在于让人感知到“在动”。@keyframes 是CSS中控制动画节奏与状态变化的核心工具，掌握它，就能让元素从静止到生动的过渡更自然、更可控。

从基础到可用：定义与关键概念

@keyframes 通过时间轴的方式定义动画，用百分比或时间点标记状态变化。你不必一次性写完全部样式，关键帧之间的过渡由浏览器平滑完成。

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

在定义完关键帧后，需要把它应用到选择器上，并设置持续时间、延迟、迭代次数与播放模式等属性，才能看到动画效果。

场景化示例：心跳与呼吸

心跳：节奏与弹性

心跳动画往往需要从静止到跳动的自然过渡，加上一点弹性反馈会更真实。

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.heart {
  animation: heartBeat 1s ease-out infinite;
}

50%处的放大模拟心脏的跳动峰值，ease-out让尾声自然收口，infinite让动画持续循环。

呼吸：柔和的起伏

呼吸动画更强调柔和的节奏与呼吸感，可以加入轻微的偏移与抖动，让效果更生活化。

@keyframes breathe {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(5px) rotate(2deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-5px) rotate(-2deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.box {
  animation: breathe 3s easeInOut infinite;
}

在时间轴上设置多段点，让起伏更自然，easeInOut让进入与离开都更平滑。

实用技巧与进阶

1. 过渡的起点与终点

@keyframes 的起点是0%，终点是100%，但中间可以插入任意时间点来表达不同的状态，如悬停、激活等。

@keyframes setActive {
  0% {
    background-color: #f0f0f0;
  }
  50% {
    background-color: #e0e0e0;
  }
  100% {
    background-color: #d0d0d0;
  }
}

2. 用时间函数控制节奏

借助 easing（缓动函数）控制动画的加速与减速，能避免“像步枪扫射”的机械感，让动画更贴近人的感知。

3. 从CSS变量驱动动画

用CSS变量（自定义属性）让动画参数更灵活，便于主题切换或响应式调整。

:root {
  --animation-speed: 2s;
  --animation-amplitude: 10px;
}

@keyframes wiggle {
  0% {
    transform: translateY(var(--animation-amplitude));
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(var(--animation-amplitude));
  }
}