CSS动画实用技巧大全

前往漫画官网入口并下载

想让你的CSS项目更具活力？本文分享实用CSS动画技巧，助你轻松打造引人注目的用户界面。CSS动画主要通过`transition`和`@keyframes`实现。`transition`擅长处理属性变化的平滑过渡，常与`:hover`等伪类结合，实现按钮颜色渐变等效果。而`@keyframes`则能定义更复杂的关键帧动画，例如元素晃动，并通过`animation`属性应用。同时，结合`transform`属性，可以实现位移、旋转、缩放等多种视觉效果，无需JavaScript即可提升用户体验。掌握这些技巧，让你的网页动起来！

CSS动画主要通过transition和@keyframes实现。transition用于属性变化时的平滑过渡，常配合:hover等伪类使用，如按钮颜色和位置渐变；@keyframes定义关键帧动画，适用于复杂流程，如元素左右晃动；结合transform可增强动画表现，实现位移、旋转、缩放等效果，提升用户体验且无需JavaScript。

在CSS项目中实现基本动画效果，主要依靠 transition 和 @keyframes 两种方式。它们能让页面元素动起来，提升用户体验，同时无需JavaScript即可完成简单交互动画。

使用 transition 实现平滑过渡

当你希望某个属性在状态变化时（如鼠标悬停）缓慢改变，transition 是最简单的方式。

常见用法是配合 :hover、:focus 等伪类使用。

示例：按钮颜色和位置渐变

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

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

说明：

• transition-property：指定要过渡的属性，如 width、color、transform
• transition-duration：动画持续时间，如 0.3s
• transition-timing-function：控制速度曲线，常用有 ease、linear、ease-in-out
• transition-delay：延迟执行时间

简写形式：transition: property duration timing-function delay;

使用 @keyframes 创建关键帧动画

当你需要更复杂的动画流程，比如循环播放、多阶段变化，就要用 @keyframes 定义关键帧，再通过 animation 属性应用。

示例：元素左右晃动动画

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: shake 0.5s ease infinite;
}
  

animation 常用属性：

• animation-name：对应 @keyframes 的名称
• animation-duration：动画总时长
• animation-timing-function：动画速度曲线
• animation-iteration-count：重复次数，可设 infinite
• animation-direction：播放方向，如 alternate（来回播放）
• animation-fill-mode：动画前后状态，如 forwards 保持最终状态

简写形式：animation: name duration timing-function delay iteration-count direction fill-mode;

结合 transform 增强动画表现

CSS 的 transform 属性常与动画搭配使用，实现位移、旋转、缩放等视觉变化，性能好且不触发重排。

常用 transform 函数：

• translate(x, y)：移动位置
• rotate(angle)：旋转角度
• scale(x, y)：缩放大小
• skew(ax, ay)：倾斜变形

例如让图标旋转：

.icon {
  transition: transform 0.4s ease;
}
.icon:hover {
  transform: rotate(180deg);
}
  

基本上就这些。掌握 transition 和 @keyframes 配合 transform，就能覆盖大多数基础动画需求，比如按钮反馈、加载提示、入场动画等。关键是理解属性变化的过程控制，避免过度使用影响性能。

今天关于《CSS动画实用技巧大全》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！