CSS 过渡动画效果

在 CSS 中,transition 是用来实现元素属性平滑过渡的一个属性。通过 transition,你可以指定当元素的状态发生变化时,如何在一定时间内平滑地过渡到新的样式,而不是立即跳变。

使用于侧边栏展开和收起了,左侧区域的自适应效果

transition 属性的基本语法:

transition: [property] [duration] [timing-function] [delay];

  • property :指定要应用过渡效果的 CSS 属性,可以是一个具体的属性(如 background-colorwidth 等),或者使用 all 表示所有可以过渡的属性。
  • duration :过渡的持续时间,通常使用秒(s)或毫秒(ms)表示。比如 0.5s 表示 0.5 秒。
  • timing-function :过渡的时间函数,用来控制动画的速度变化。常见的有 lineareaseease-inease-out 等。
  • delay :指定过渡效果开始前的延迟时间。可以使用秒(s)或毫秒(ms)表示。

常见的 transition 示例:

  1. 基本过渡效果: 当鼠标悬停在元素上时,背景颜色会平滑过渡:

    javascript 复制代码
    div {
      background-color: blue;
      transition: background-color 0.5s ease;
    }
    
    div:hover {
      background-color: red;
    }

    解释

    • 元素的背景色会从蓝色平滑过渡到红色,过渡时间是 0.5 秒,使用默认的 ease 时间函数(即开始慢,结束快)。
  2. 多个属性过渡: 同时过渡多个属性,例如宽度和颜色:

    javascript 复制代码
    div {
      width: 100px;
      height: 100px;
      background-color: blue;
      transition: width 0.3s, height 0.3s, background-color 0.5s;
    }
    
    div:hover {
      width: 200px;
      height: 200px;
      background-color: red;
    }

    解释

    • 当鼠标悬停时,div 的宽度和高度在 0.3 秒内过渡到新的值,而背景颜色在 0.5 秒内过渡。
  3. 延迟过渡效果: 设置延迟后才开始过渡:

    javascript 复制代码
    div {
      width: 100px;
      transition: width 0.5s ease 1s; /* 延迟 1 秒后开始宽度过渡 */
    }
    
    div:hover {
      width: 200px;
    }

    解释

    • 当鼠标悬停时,宽度会在 1 秒的延迟后开始过渡,持续时间为 0.5 秒。
  4. 使用 all 关键字: 同时过渡所有属性:

    javascript 复制代码
    div {
      width: 100px;
      height: 100px;
      background-color: blue;
      transition: all 0.5s ease;
    }
    
    div:hover {
      width: 200px;
      height: 200px;
      background-color: red;
    }

    解释

    • transition: all 0.5s ease; 表示所有可过渡的属性都会在 0.5 秒内平滑过渡,采用 ease 的时间函数。

常见的 timing-function(时间函数):

  • ease:默认的缓动效果,开始慢,接着加速,最后减速。
  • linear:匀速过渡,整个过渡过程的速度是均匀的。
  • ease-in:过渡开始时较慢,然后加速。
  • ease-out:过渡开始时较快,最后减速。
  • ease-in-out:过渡开始和结束时较慢,中间部分较快。
  • cubic-bezier(x1, y1, x2, y2):自定义的时间函数,可以通过贝塞尔曲线来控制过渡效果的速度。

总结:

transition 是 CSS 中非常实用的一个属性,它允许你在状态改变时(例如,鼠标悬停)平滑地过渡到新的样式。通过控制过渡的时间、时间函数、延迟等,你可以实现丰富的动态效果,提升用户体验。

相关推荐
掘金一周4 分钟前
Flutter Riverpod 3.0 发布,大规模重构下的全新状态管理框架 | 掘金一周 9.18
前端·人工智能·后端
一涯15 分钟前
页面出现空白区域
前端
spmcor39 分钟前
MinIO本地对象存储部署指南
前端
少年纪43 分钟前
前端用 pdf.js 将 PDF 渲染到 Canvas 再转图片,文字消失的坑
前端
RoyLin44 分钟前
TypeScript设计模式:复合模式
前端·后端·typescript
我是天龙_绍1 小时前
CSS/JS/图片全挂了,部署后页面白屏/资源加载失败?这两个配置项坑了多少人!
前端
我的小月月1 小时前
SQLFE:网页版数据库(VUE3+Node.js)
前端·后端
小高0071 小时前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
汤姆Tom1 小时前
Node.js 版本管理、NPM 命令、与 NVM 完全指南
前端·npm·node.js
Alan521591 小时前
Java 后端实现基于 JWT 的用户认证和权限校验(含代码讲解)
前端·后端