登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›Web前端入门第 43 问：CSS 动画之过渡属性 transition ...

Web前端入门第 43 问：CSS 动画之过渡属性 transition 改变用户体验

啦汇 前天 22:16
CSS3 规范出现之前，要实现一个动画效果那必须借助 JavaScript 的能力才够得着，所以当时的前端开发但凡听到动画交互，那眉头可就成了一个川字儿了~
transition 的出现，改变了实现动画难的困境，也让前端的交互不再生硬，所有的页面元素如同有了灵性一般。
transition 过渡

要实现一个 CSS 属性 0 -> 1 的变化，在不使用 transition 的情况下，元素就两种状态 0 和 1，而 transition 则是将 0 -> 1 之间的变化完全呈现给了用户，看起来就像是属性 0 慢慢的走到 1，而不是从 0 闪现到 1，期间元素走过了 0.1 0.2 0.3 ... 1，这种变化就叫过渡。
transition 相关的 CSS 属性：

  • transition-property 指定哪些 CSS 属性需要应用过渡动画
  • transition-duration 定义动画持续时间
  • transition-timing-function 控制动画速度变化曲线
  • transition-delay 设置动画开始前的等待时间，也就是延迟执行
  • transition 简写属性
  • will-change 提前告知浏览器哪些属性会变化（优化性能）
transition-property

transition-property 属性用于告诉浏览器哪个 CSS 属性要用来做过渡效果，可以是单个属性，也可以是多个属性，还可以是关键字 all。
语法：
  1. transition-property: none; /* 无属性过渡 */
  2. transition-property: all; /* 所有属性都添加过渡效果，出于性能考虑不建议使用 all */
  3. transition-property: transform; /* 只对 transform 做过渡 */
  4. transition-property: transform, opacity; /* 只对 transform 和 opacity 添加过渡 */
复制代码
过渡动画必须几个属性同时设置才会有效，所以单个属性无法演示~
transition-duration

transition-duration 属性用于设置过渡动画的持续时间，单位是秒（s）或毫秒（ms），默认是 0s，表示没有过渡动画。
需注意单位换算关系：1s=1000ms
语法：
  1. transition-duration: 0s; /* 无过渡动画 */
  2. transition-duration: 0.5s; /* 所有属性都添加 0.5s 过渡 */
  3. transition-duration: 0.5s, 200ms; /* transition-property 指定的第一个属性持续 0.5s，第二个属性持续 200ms */
复制代码
transition-timing-function

transition-timing-function 用于设置速度曲线，控制动画速度变化，这里面有个叫做 贝塞尔曲线 的东东，顶级大佬做出来的都是一堆数学公式~~本文不会介绍如何绘制贝塞尔曲线，咱们学会怎么使用即可，如果对贝塞尔曲线绘制感兴趣可查找相关书籍。
相关属性值：

  • ease 默认值，在过渡的中间增加速度，在过渡结束时减慢速度。等于 cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear 以均匀的速度过渡。等于 cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in 开始缓慢，过渡速度逐渐增加，直到完成。等于 cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out 开始快速过渡，随着过渡的继续而减慢。等于 cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out 开始缓慢过渡，然后加速，然后再次减速。等于 cubic-bezier(0.42, 0, 0.58, 1.0)
  • cubic-bezier(x1, y1, x2, y2) 自定义贝塞尔曲线， x1, y1 和 x2, y2 分别代表曲线控制点坐标，其中 x1 和 x2 值必须在 0 到 1 的范围内。
  • step-start 等于 steps(1, jump-start)
  • step-end 等于steps(1, jump-end)
  • steps(n, ) 在过渡过程中显示n个停留点，每个停留点显示的时间长度相等。
    例如：如果 n 是 5，那么就有 5 个步骤。过渡过程是在 0%、20%、40%、60% 和 80% 处暂时停留，还是在 20%、40%、60%、80% 和 100% 处停留，或者是在 0% 到 100% 之间设置5个停留点，亦或是包括0%和100%标记在内的5个停留点（在0%、25%、50%、75%和100%处），这取决于使用以下哪个 ：
    jump-start
    表示左连续函数，即第一个跳跃发生在过渡开始时；
    jump-end
    表示右连续函数，即最后一个跳跃发生在动画结束时；
    jump-none
    两端都没有跳跃。相反，在0%和100%标记处各自停留，每个停留点占持续时间的1/n；
    jump-both
    在 0% 和 100% 标记处都包含暂停，实际上在过渡时间内增加了一个步骤；
    start
    与 jump-start 相同。
    end
    与 jump-end 相同。
语言很空洞，看后面例子。
语法：
  1. transition-timing-function: ease;
  2. transition-timing-function: linear;
  3. transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
  4. transition-timing-function: step-start;
  5. transition-timing-function: steps(5, jump-end);
复制代码
在使用 Chrome 调试工具时候，发现 linear 还有一种函数式的写法，查阅了兼容性，发现这种写法比较吃浏览器版本，都是 2023 年之后的浏览器版本才开始支持。写法如下：
  1. /* 第一位表示运动进度，第二位表示时间百分比 */
  2. transition-timing-function: linear(
  3.   0 0%,
  4.   0.22 2.1%,
  5.   0.86 6.5%,
  6.   1.11 8.6%,
  7.   1.3 10.7%,
  8.   1.35 11.8%,
  9.   1.37 12.9%,
  10.   1.37 13.7%,
  11.   1.36 14.5%,
  12.   1.32 16.2%,
  13.   1.03 21.8%,
  14.   0.94 24%,
  15.   0.89 25.9%,
  16.   0.88 26.85%,
  17.   0.87 27.8%,
  18.   0.87 29.25%,
  19.   0.88 30.7%,
  20.   0.91 32.4%,
  21.   0.98 36.4%,
  22.   1.01 38.3%,
  23.   1.04 40.5%,
  24.   1.05 42.7%,
  25.   1.05 44.1%,
  26.   1.04 45.7%,
  27.   1 53.3%,
  28.   0.99 55.4%,
  29.   0.98 57.5%,
  30.   0.99 60.7%,
  31.   1 68.1%,
  32.   1.01 72.2%,
  33.   1 86.7%,
  34.   1 100%
  35. )
复制代码
transition-delay

transition-delay 属性用于设置过渡动画开始前的等待时间，单位是秒（s）或毫秒（ms），默认是 0s，表示不用延迟。语法与 transition-duration 一样。
transition

简写属性，同时设置 transition-property、transition-duration、transition-timing-function、transition-delay 四个属性。
语法：
  1. transition: transform 3s; /* transform 属性添加 3s 过渡 */
  2. transition: transform 3s 0.5s; /* transform 属性添加 3s 过渡，延迟 0.5s 开始 */
  3. transition: transform 3s ease-in-out; /* transform 属性添加 3s 过渡，使用 ease-in-out 速度曲线 */
  4. transition: transform 3s ease-in-out 0.5s; /* transform 属性添加 3s 过渡，使用 ease-in-out 速度曲线，延迟 0.5s 开始 */
复制代码
will-change

will-change 这是一般双刃剑，用得好可以优化性能，用得不好反而会使用大量机器资源导致页面变慢！！
使用准则：此属性应当作为最后的手段使用，不要过早优化，如果您的页面未出现卡顿变慢，那么您不需要使用这个属性！
使用方式：
  1. will-change: transform; /* 提前分配 GPU 资源，优化 transform 变化 */
复制代码
效果演示

不同曲线效果

不同曲线会影响动画运动速度。
  1.   ease
  2.   linear
  3.   ease-in
  4.   ease-out
  5.   ease-in-out
  6.   cubic-bezier
复制代码
效果：
1.gif

steps 逐帧动画效果

steps 可以理解为关键帧动画，每次都跳到一个关键帧。
  1.   step-start
  2.   step-end
  3.   steps(5, start)
  4.   steps(5, jump-start)
  5.   steps(5, jump-end)
  6.   steps(5, jump-none)
  7.   steps(5, jump-both)
  8.   steps(5, start)
  9.   steps(5, end)
复制代码
效果：
2.gif

不同持续时间

持续时间越短，运动越快。
  1.   1s
  2.   2s
  3.   500ms
  4.   1500ms
复制代码
效果：
3.gif

不同延迟时间

延迟时间越长，动画等待时间越久。
  1.   1s
  2.   2s
  3.   500ms
  4.   1500ms
复制代码
效果：
4.gif

贝塞尔曲线

Chrome 开发者工具内置曲线调试工具：
5.png

点击 1 可以呼出调试工具，2 可以切换不同类型的曲线，3 可以切换同类型的不同曲线，4 可以拖拽手柄绘制不同曲线。
这里再分享一个在线绘制贝塞尔曲线的链接：https://yisibl.github.io/cubic-bezier/
图解贝塞尔曲线：
6.png

图中红色箭头指向的红点表示：在动画执行 37% 时间的时候要运动到目标的 53% 位置。
图中 1（x1, y1） 和 2（x2, y2） 分别表示控制贝塞尔取消的两个坐标点，cubic-bezier(x1, y1, x2, y2)。
贝塞尔曲线越陡峭，表示速度越快。
总结


  • 在使用 transition 过渡动画时，必须要有触发条件！比如鼠标放上时、鼠标离开时、元素的 class 变化等。
  • transition 无法做到让元素无休止的运动下去，过渡动画必须有持续时间！
  • transition-property 应当尽可能少的使用 all（浏览器需要监控元素的所有可过渡属性）。
  • transition-property 指定的属性必须是可量化的属性，比如 transform、background-color、color 等，不能是 display、float、font-style 这种无法计算的属性。
  • 避免过渡 margin/width 等布局属性（易引发重排，性能差）

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
啦汇
前天 22:16

0

粉丝关注

9

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫