跳到主要内容

transition

2022年12月09日
柏拉文
越努力，越幸运

一、认识​

transition 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性。过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

二、语法​

transition = 
  <single-transition>#  

<single-transition> = 
  [ none | <single-transition-property> ]  ||
  <time>                                   ||
  <easing-function>                        ||
  <time>                                   

<single-transition-property> = 
  all             |
  <custom-ident>  

<easing-function> = 
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                                |
  step-end                                  |
  steps( <integer> [, <step-position> ]? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}  


/* Apply to 1 property */
/* 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;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

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

三、属性​

3.1 transition-delay​

**transition-delay**属性规定了在过渡效果开始作用之前需要等待的时间。值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

语法

transition-delay = 
  <time>#  


/* <time>?值 */
transition-delay: 3s;
transition-delay: 2s, 4ms;

/* 全局变量 */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;

取值

  • <time>: 表明动画效果属性生效之前需要等待的时间。

3.2 transition-duration​

transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s，表示不出现过渡动画。

语法

transition-duration = 
  <time [0s,∞]>#  


/* <time> 值 */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

/* 全局值 */
transition-duration: inherit;
transition-duration: initial;
transition-duration: unset;

取值

  • <time>: 表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。

3.3 transition-property​

transition-property指定应用过渡属性的名称。

语法

transition-property = 
  none                           |
  <single-transition-property>#  

<single-transition-property> = 
  all             |
  <custom-ident>  


/* Keyword values */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property: all, -moz-specific, sliding;

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

取值

  • none: 没有过渡动画。

  • all: 所有可被动画的属性都表现出过渡动画。

  • IDENT: 属性名称。由小写字母 a 到 z，数字 0 到 9，下划线_和破折号``-`。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。

3.4 transition-timing-function​

CSS 属性受到 transition effect 的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个 transition 变化过程中，变化速度可以不断改变。这条加速度曲线被 <timing-function> 所定义，之后作用到每个 CSS 属性的过渡。

语法

/* Keyword values */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/* Function values */
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

/* Steps Function keywords */
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

/* Multiple timing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/* Global values */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: revert;
transition-timing-function: revert-layer;
transition-timing-function: unset;

取值

  • <timing-function>: 通过transition-property中定义被过渡属性，每个 <timing-function> (en-US)的值代表与这个属性相对应的 timing function.

    • linear: 动画以恒定速度运行。此关键词表示缓冲函数 cubic-bezier(0.0, 0.0, 1.0, 1.0)。

    • ease: 动画缓慢开始，然后突然加速，最后缓慢移向目标。此关键词表示缓冲函数 cubic-bezier(0.25, 0.1, 0.25, 1.0)。它与 ease-in-out 类似，但它在开始时加速更快。

    • ease-in: 动画缓慢开始，然后逐渐加速直到结束，在结束点时突然停止。此关键词表示缓冲函数 cubic-bezier(0.42, 0.0, 1.0, 1.0)。

    • ease-in-out: 动画缓慢开始，然后加速，最后减速直至结束。此关键词表示缓冲函数 cubic-bezier(0.42, 0.0, 0.58, 1.0)。开始时，其表现与 ease-in 函数类似；结束时，与 ease-out 函数类似。

    • ease-out: 此动画突然开始，然后逐渐减速直至结束。此关键词表示缓冲函数 cubic-bezier(0.0, 0.0, 0.58, 1.0)。

    • cubic-bezier(x1, y1, x2, y2):

    • step-start: 此关键词表示 steps(1, jump-start) 或者 steps(1, start)

    • step-end: 此关键词表示 steps(1, jump-end) 或者 steps(1, end)

    • steps(number_of_steps, direction):

      • number_of_steps:

      • direction:

        • jump-start:

        • jump-end:

        • jump-both:

        • jump-none:

        • start:

        • end:

四、问题​

4.1 transition 和 animation 的区别？​

  • transition: 过渡属性, 强调过渡。强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。

  • animation: 它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。