CSS transition属性（过渡效果）

CSS学习 本文总阅读量次

transition 属性实现过渡效果

  • transition 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
    • 2个属性：property name | duration，比如all .2s
    • 3个属性：
      • property name | duration | delay，比如all .2s 1s
      • property name | duration | timing function,比如all .2s ease-in
    • 4个属性：property name | duration | timing function | delay，比如all .2s ease-in 1s
  • 默认值：all 0 ease 0
  • transition 可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。
  • 注意：一定要设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
  • transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。
    • 比如transition: margin-right 4s, color 1s
  • MDN 关于transition 属性
  • 例子：在“百度前端技术学院 第七天学习笔记（CSS position）”的“例子3”中。
  • 语法：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    /* 1个 CSS 属性的过渡效果 */
    /* property name | duration */
    transition: margin-right 4s;

    /* property name | duration | delay */
    transition: margin-right 4s 1s;

    /* property name | duration | timing function */
    transition: margin-right 4s ease-in-out;

    /* property name | duration | timing function | delay */
    transition: margin-right 4s ease-in-out 1s;

    /* 2个 CSS 属性的过渡效果 */
    transition: margin-right 4s, color 1s;

    /* 所有 CSS 属性的过渡效果 */
    transition: all 0.5s ease-out;

    /* Global values */
    transition: inherit;
    transition: initial;
    transition: unset;

transition-property属性规定设置过渡效果的 CSS 属性的名称

  • transition-property属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
  • 提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。
  • MDN 关于transition-property属性
属性值 描述
none 没有属性会获得过渡效果
all 所有可被动画的属性都表现出过渡动画
IDENT 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）组成。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。。

transition-duration属性指定过渡效果时长

  • transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。不接受负值。
  • 可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。
  • 如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
  • 注意：这是一个实验中的功能。
    此功能某些浏览器尚在开发中，请参考MDN中浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
  • MDN 关于transition-duration属性

transition-timing-function 属性规定速度效果的速度曲线

  • 该属性允许过渡效果随着时间来改变其速度。
  • 可以规定多个timing function,通过使用 transition-property属性，可以根据主列表(transition property的列表)给每个CSS属性应用相应的timing function.
  • 如果timing function的个数比主列表中数量少，缺少的值被设置为初始值（ease） 。如果timing function比主列表要多，timing function函数列表会被截断至合适的大小。这两种情况下声明的CSS属性都是有效的。
属性值 描述
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
  • 注意：这是一个实验中的功能。
    此功能某些浏览器尚在开发中，请参考MDN中浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
  • MDN 关于transition-timing-function 属性

transition-delay属性定义过渡效果何时开始

  • transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。
  • 属性值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
  • 可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性（transition-property）
  • 注意：这是一个实验中的功能。
    此功能某些浏览器尚在开发中，请参考MDN中浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
  • MDN 关于transition-delay属性

使用场景

  • 在工作中，完成一个文字在鼠标移入时显示方框并提供删除图标，需要在移入=》显示方框加上一个过渡效果
  • 例子：
    1
    2
    3
    <div class="sort-cell" >
      <span>审核时间</span>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .sort-cell {
      cursor: pointer;
      border: 2px solid transparent; // content-box，加上透明边框占位置
      &:hover { // hover显示边框，边框从无到有的过渡动画
        transition: all .15s linear;
        border-radius: 6px;
        border: 2px solid #0077FF;
      }
    }
    效果展示
CSS学习