前言我们之前给博客卡片、导航栏加过 hover 变色、上浮效果但没有过渡动画鼠标移入移出时样式瞬间切换观感生硬廉价。 CSS 提供两套动效方案transition 过渡、animation 关键帧动画。 transition 适合简单状态切换hover、点击、滚动变化零学习成本是页面美化使用率最高的属性本篇先吃透过渡全面改造博客所有交互元素让按钮、卡片、导航栏全部拥有丝滑渐变效果。一、transition 过渡基础语法transition 用来给元素的属性变化添加渐变缓冲语法四件套csstransition: 要过渡的属性 过渡时长 缓动函数 延迟时间;最简通用写法项目高频css/* 所有属性都参与过渡0.3秒完成变化 */ transition: all 0.3s ease;参数拆解all所有变化的样式都加过渡也可单独写color/transform只针对某一个属性0.3s动画持续时间页面通用 0.2~0.4s 最佳ease缓动曲线先慢→中间快→收尾慢日常默认使用可选延迟transition: all 0.3s ease 0.1s;代表触发后延迟 0.1 秒再执行二、支持过渡的常用属性新手必记不是所有 CSS 属性都能做过渡高频可用尺寸类width、height、padding、margin颜色类color、background-color、border-color变形类transform位移、缩放、旋转透明度opacity阴影box-shadow避坑display 不能做过渡display:none 和 block 是瞬间切换无法渐变隐藏 / 显示想要淡入淡出改用opacity配合visibility。三、博客项目批量改造实战1. 文章卡片 hover 上浮柔和过渡原代码只有 transform 变化无过渡跳转生硬改造css.article-card { background: #fff; padding: 25px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 新增过渡 */ transition: all 0.3s ease; } .article-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }效果鼠标悬浮卡片缓慢上浮、阴影柔和加深移除鼠标平滑恢复原样。2. 导航链接文字变色过渡css.nav-menu a { text-decoration: none; color: #333; transition: color 0.25s ease; } .nav-menu a:hover { color: #409eff; }3. 按钮 hover 缩放渐变css.btn { padding: 8px 16px; background: #409eff; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } .btn:hover { transform: scale(1.05); background: #337ecc; }4. 淡入隐藏侧边小提示替代 displaycss.tip { opacity: 0; visibility: hidden; transition: all 0.3s ease; } .shturl.c { opacity: 1; visibility: visible; }配合 JS 添加 / 移除 show 类实现文字淡入淡出提示。四、transform 变形搭配过渡动效灵魂transform 可以实现位移、缩放、旋转配合 transition 效果翻倍三个常用写法css/* 向上位移 */ transform: translateY(-4px); /* 放大1.05倍 */ transform: scale(1.05); /* 轻微旋转 */ transform: rotate(3deg);复合写法多个变形同时生效csstransform: translateY(-3px) scale(1.02);五、transition 新手高频坑点过渡写在 hover 里会失效transition 必须写在元素默认样式不能只写 hover过渡时长不要超过 0.5s过长会让页面显得拖沓all 虽然方便但大型页面建议指定具体属性减少浏览器性能消耗固定宽高变化会触发页面重排优先使用 transform 做动效性能更高。六、本篇结语学会 transition 过渡我们博客所有 hover 交互彻底摆脱生硬切换页面细腻度直接提升一个档次。过渡是商用网站标配基础动效零性能负担、上手简单。 下一篇我们学习 CSS animation 关键帧动画实现循环轮播、加载动画、文字浮动等自动播放特效无需 JS 也能完成动态画面。