CSS Transition入门指南


CSS Transition 完全指南

目录

  1. [Transition 的作用](#Transition 的作用)
  2. 核心属性
  3. 代码示例
  4. 使用场景
  5. 性能优化
  6. 常见问题
  7. 思维导图

1. Transition 的作用

CSS Transition 用于在 属性值变化时 创建平滑的过渡效果。例如:

  • 鼠标悬停时按钮放大
  • 元素颜色渐变切换
  • 位置移动的缓动效果

2. 核心属性

属性 描述 默认值 示例值
transition-property 指定要过渡的属性 all width, opacity
transition-duration 过渡持续时间 0s 0.3s, 500ms
transition-timing-function 速度曲线(缓动函数) ease linear, ease-in-out
transition-delay 过渡开始前的延迟 0s 0.2s
简写属性 transition: property duration timing-function delay; - transition: width 0.3s ease-in-out 0.1s;

3. 代码示例

基础示例:悬停放大按钮

html 复制代码
<button class="btn">Hover Me</button>

<style>
.btn {
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border: none;
  transition: transform 0.3s ease;
}

.btn:hover {
  transform: scale(1.1); /* 触发过渡 */
}
</style>

多属性过渡

css 复制代码
.box {
  width: 100px;
  height: 100px;
  background: #e74c3c;
  transition: 
    width 0.5s ease-in-out,
    background 0.3s linear;
}

.box:hover {
  width: 200px;
  background: #2ecc71;
}

延迟触发

css 复制代码
.element {
  opacity: 0.5;
  transition: opacity 0.4s ease 1s; /* 1秒后开始过渡 */
}

.element:hover {
  opacity: 1;
}

4. 使用场景

场景 示例
悬停效果 按钮放大、颜色渐变
表单交互 输入框聚焦时边框高亮
加载状态 进度条平滑填充
动态显示/隐藏 淡入淡出(结合 opacityvisibility

5. 性能优化

  • 优先使用 GPU 加速属性

    css 复制代码
    /* 高性能 */
    transform: translateX(100px);
    opacity: 0.5;
    
    /* 低性能(触发重排) */
    margin-left: 100px;
    width: 200px;
  • 避免过渡过多属性:同时过渡多个属性可能导致卡顿。

  • 使用 will-change :提示浏览器提前优化:

    css 复制代码
    .element {
      will-change: transform;
    }

6. 常见问题

Q1:过渡不生效?

  • 检查是否设置了 transition-duration
  • 确保属性值变化(如通过 :hover 或 JavaScript 触发)。

Q2:如何实现阶跃动画?

使用 steps() 缓动函数:

css 复制代码
transition-timing-function: steps(4, jump-end);

Q3:如何禁用过渡?

css 复制代码
.element {
  transition: none;
}

7. 思维导图结构

plaintext 复制代码
CSS Transition
├── 作用
│   └── 平滑属性变化
├── 核心属性
│   ├── transition-property
│   ├── transition-duration
│   ├── transition-timing-function
│   ├── transition-delay
│   └── 简写语法
├── 缓动函数(easing)
│   ├── linear
│   ├── ease-in
│   ├── ease-out
│   └── cubic-bezier()
├── 使用场景
│   ├── 悬停效果
│   ├── 表单交互
│   └── 动态显示/隐藏
└── 性能优化
    ├── GPU 加速属性
    ├── 避免重排
    └── will-change

扩展练习

  1. 实现一个卡片悬停时阴影加深并上移的效果。
  2. 制作一个菜单栏,鼠标悬停时子菜单从顶部滑出。
  3. 结合 JavaScript,在点击按钮时通过添加类名触发过渡。

资源推荐


相关推荐
哈希茶馆1 小时前
前端工程化利器:Node.js 文件匹配库 fast-glob 完全指南——比传统方案快 350% 的「文件搜索神器」
运维·前端·javascript·npm·node.js·全文检索·运维开发
zhangguo20022 小时前
react18基础速成
前端·javascript·react.js
海盐泡泡龟2 小时前
Vue中的过滤器知道多少?从是什么、怎么用、应用场景、原理分析、示例解释
前端·vue.js·flutter
NoneCoder4 小时前
CSS 架构与命名规范
前端·css
牧杉-惊蛰10 小时前
Vue3中到达可视区域后执行
前端·javascript·vue.js
GISer_Jing10 小时前
ByteMD详解
前端·javascript
小杨升级打怪中10 小时前
前端面经-VUE3篇(二)--vue3基础知识(二)计算属性(computed)、监听属性(Watch)
前端
IoOozZzzz11 小时前
ES6异步编程中Promise与Proxy对象
前端·javascript·es6
hunandede11 小时前
av_dict_get,av_dict_set,av_dict_set_int
java·前端·javascript
linkingvision12 小时前
Chrome 136 H265 WebRTC 支持 正式版本已包含
前端·chrome·webrtc