CSS 动画入门：过渡、关键帧与实用技巧

太微2025-04-10前端CSS 动画过渡

CSS 动画入门：过渡、关键帧与实用技巧

Web 上常见的「动效」主要来自两类：过渡（transition） 与 关键帧动画（@keyframes + animation）。前者适合状态变化（悬停、展开），后者适合循环或复杂路径的动画。

过渡 `transition`

在属性值变化时，让浏览器在一段时间内插值，而不是瞬间跳变。

常用简写

.button {
  background-color: #3b82f6;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background-color: #2563eb;
  transform: translateY(-2px);
}

拆开写

.el {
  transition-property: opacity, transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s;
}

transition-property：参与过渡的属性，常用 all（注意性能，能写具体属性更好）。
transition-timing-function：除 linear、ease 外，可用 cubic-bezier() 自定义曲线。
只对 transform、opacity 做动画通常更利于合成层，减少重排。

关键帧 `@keyframes` 与 `animation`

适合不依赖交互或需要多段、循环的效果。

定义动画

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

.badge {
  animation: pulse 1.6s ease-in-out infinite;
}

`animation` 常用子属性

.banner {
  animation-name: slide-in;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.1s;
  animation-iteration-count: 1;        /* 或 infinite */
  animation-direction: normal;         /* alternate 可往返 */
  animation-fill-mode: forwards;       /* 结束后保持最后一帧 */
  animation-play-state: paused;        /* 可配合 JS 控制暂停 */
}

简写示例：

.banner {
  animation: slide-in 0.5s ease-out 0.1s 1 forwards;
}

`transform` 与动效

translate / scale / rotate 常和过渡、动画组合，避免只改 top/left 触发大量布局计算。

.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 24px rgb(0 0 0 / 0.12);
}

示例一：淡入

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-overlay {
  animation: fade-in 0.2s ease-out forwards;
}

示例二：从侧滑入

@keyframes slide-from-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.drawer {
  animation: slide-from-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

示例三：无限加载点

@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.dot {
  animation: bounce 1.4s ease-in-out infinite both;
}
.dot:nth-child(2) {
  animation-delay: 0.16s;
}
.dot:nth-child(3) {
  animation-delay: 0.32s;
}

可访问性：尊重「减少动效」

部分用户系统开启「减少动态效果」，可用媒体查询减弱或关闭非必要动画：

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

（可按页面需要缩小作用范围，避免一刀切影响必须动效。）

性能提示（简要）

优先动画 transform、opacity。
谨慎对 width、height、margin 等触发布局的属性做连续过渡。
复杂场景可了解 will-change（勿滥用，动画结束可考虑移除）。

小结

过渡：有起点和终点状态，用 transition。
关键帧：多段、循环、与状态弱相关，用 @keyframes + animation。
与 transform 搭配通常更顺滑；注意 prefers-reduced-motion。

需要与时间线强绑定、或与滚动联动的复杂交互时，可再了解 Web Animations API 或动画库；日常页面 CSS 过渡与关键帧已能覆盖大部分需求。

CSS 动画入门：过渡、关键帧与实用技巧

ON THIS PAGE