CSS transition-timing-function 属性-之路教程

语法

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)  | initial | inherit;

转换时序函数示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .box {
        padding: 2em;
        width: 40px;
        height: 40px;
        left: 0;
        background-color: #666;
        position: relative;
        -webkit-transition-property: background-color, left;
        -moz-transition-property: background-color, left;
        -o-transition-property: background-color, left;
        transition-property: background-color, left;
        -webkit-transition-duration: 1s, 1s;
        -moz-transition-duration: 1s, 1s;
        -o-transition-duration: 1s, 1s;
        transition-duration: 1s, 1s;
        -webkit-transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
        -moz-transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
        -o-transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
        transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
        /* first value corresponds to the first transition-property value, and the second value corresponds to the second */
      }
      .example:hover .box {
        left: 450px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Transition-timing-function 属性示例</h2>
	<p>将鼠标悬停在元素上查看效果</p>
    <div class="example">
      <div class="box"></div>
    </div>
  </body>
</html>

具有“ease”、“linear”、“ease-in”和“ease-out”值的过渡时间函数示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .example {
        padding: 2em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        border-radius: 50%;
        position: relative;
        -webkit-transition-property: background-color, left;
        -moz-transition-property: background-color, left;
        -o-transition-property: background-color, left;
        transition-property: background-color, left;
        -webkit-transition-duration: 1s, 1s;
        -moz-transition-duration: 1s, 1s;
        -o-transition-duration: 1s, 1s;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        -webkit-transition-timing-function: ease;
        -moz-transition-timing-function: ease;
        -o-transition-timing-function: ease;
        transition-timing-function: ease;
      }
      .el2 {
        -webkit-transition-timing-function: linear;
        -moz-transition-timing-function: linear;
        -o-transition-timing-function: linear;
        transition-timing-function: linear;
      }
      .el3 {
        -webkit-transition-timing-function: ease-in;
        -moz-transition-timing-function: ease-in;
        -o-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
      }
      .el4 {
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
      }
    </style>
  </head>
  <body>
    <h2>Transition-timing-function 属性示例</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: ease;
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: linear;
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-timing-function: ease-in;
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-timing-function: ease-out;
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

具有“step-start”和“step-end”值的转换时序函数示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .example {
        padding: 2em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        border-radius: 50%;
        position: relative;
        -webkit-transition-property: background-color, left;
        -moz-transition-property: background-color, left;
        -o-transition-property: background-color, left;
        transition-property: background-color, left;
        -webkit-transition-duration: 1s, 1s;
        -moz-transition-duration: 1s, 1s;
        -o-transition-duration: 1s, 1s;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        -webkit-transition-timing-function: step-start;
        -moz-transition-timing-function: step-start;
        -o-transition-timing-function: step-start;
        transition-timing-function: step-start;
      }
      .el2 {
        -webkit-transition-timing-function: step-end;
        -moz-transition-timing-function: step-end;
        -o-transition-timing-function: step-end;
        transition-timing-function: step-end;
      }
    </style>
  </head>
  <body>
    <h2> Transition-timing-function 属性示例</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: step-start;
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: step-end;
      </p>
      <div class="example el2"></div>
    </div>
  </body>
</html>

CSS transition-timing-function 属性值说明

值	描述
ease	过渡效果开始缓慢，然后变得更快并缓慢结束。这是默认值。
linear	过渡效果以相同的速度开始。
ease-in	过渡效果开始缓慢，但最终变得更快，突然停止。
ease-out	过渡效果快速启动，但最后减慢了。
ease-in-out	过渡效果开始缓慢并缓慢结束。
step-start	等于1，开始。
step-end	等于1，结束。
steps(int,start	end)
cubic-bezier (n,n,n,n)	通过Cubic贝塞尔函数定义值。
initial	它使属性使用其默认值。
inherit	它从其父母元素继承了属性。

CSS transition-timing-function 属性

transition-timing-function CSS 属性指定过渡在其持续时间内进行，允许更改速度。

transition-timing-function 属性是 CSS3 属性之一。

它具有以下值：

ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end

对于最大的浏览器兼容性扩展，例如 -webkit- 用于 Safari、Google Chrome 和 Opera（较新版本），-moz- 用于 Firefox，-o- 用于旧版本的 Opera 与此属性一起使用。

初始值	ease
应用于	所有元素，以及 ::before 和 ::after伪元素。
继承	无效
可动画的	无效
版本	CSS3.
DOM 语法	object.Style.TransitionTimingFunction = "ease in";

日期：2020-06-02 22:14:50 来源：oir作者：oir

←CSS transition-属性

CSS transition过渡属性→

语法

转换时序函数示例：

具有“ease”、“linear”、“ease-in”和“ease-out”值的过渡时间函数示例：

具有“step-start”和“step-end”值的转换时序函数示例：

CSS transition-timing-function 属性值说明

目录