CSS transition-属性-之路教程

语法

transition-property: none | all | property | initial | inherit;

transition-属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        -webkit-transition-duration: 1s;
        transition-duration: 1s;
        -webkit-transition-property: height;
        -moz-transition-property: height;
        -o-transition-property: height;
        transition-property: height;
      }
      div:hover {
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-属性示例</h2>
    <p>将鼠标悬停在元素上以查看效果。</p>
    <div></div>
  </body>
</html>

具有过渡宽度和高度的 transition-属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        -webkit-transition-duration: 1s;
        -webkit-transition-property: width, height;
        -moz-transition-property: width, height;
        -o-transition-property: width, height;
        transition-property: width, height;
        transition-duration: 1s;
      }
      div:hover {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-属性示例</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

具有过渡背景颜色的 transition-属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: #666666;
        -webkit-transition-duration: 1s;
        transition-duration: 1s;
        -webkit-transition-property: background-color;
        -moz-transition-property: background-color;
        -o-transition-property: background-color;
        transition-property: background-color;
      }
      div:hover {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Transition-属性示例</h2>
    <p>将鼠标悬停在元素上以查看效果。</p>
    <div></div>
  </body>
</html>

具有过渡背景颜色和左位置偏移过渡的 transition-属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .element {
        padding: 1em;
        width: 30px;
        height: 30px;
        left: 0;
        cursor: pointer;
        background-color: #8ebf42;
        position: relative;
        -webkit-transition-property: background-color, left;
        transition-property: background-color, left;
        -webkit-transition-duration: 1s, 1s;
        transition-duration: 1s, 1s;
        -webkit-transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
        transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
      }
      .element:hover {
        left: 250px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>将鼠标悬停在元素上以查看背景色和左边位置变化。</p>
      <div class="element"></div>
    </div>
  </body>
</html>

带有过渡字体的 transition-属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      span {
        display: inline-block;
        font-family: sans-serif;
        -webkit-transition-duration: 0.6s;
        transition-duration: 0.6s;
        letter-spacing: 1;
        font-size: 20px;
        line-height: 28px;
        color: #777777;
        -webkit-transition-property: letter-spacing, font-size, line-height;
        -moz-transition-property: letter-spacing, font-size, line-height;
        -o-transition-property: letter-spacing, font-size, line-height;
        transition-property: letter-spacing, font-size, line-height;
      }
      span:hover {
        color: #0f9881;
        letter-spacing: 6;
        font-size: 26px;
        line-height: 34px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-属性示例</h2>
    <p>将鼠标悬停在元素上以查看效果。</p>
  </body>
</html>

CSS transition-属性

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

它可以是逗号分隔的属性名称，也可以使用“all”值来指定要转换的元素上的所有属性。

transition-property 是 CSS3 属性之一。

并非 CSS 中的所有属性都可以转换。

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

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

CSS transition-property 属性值说明

值	描述
none	不会出现过渡效果。
all	过渡效果将适用于所有属性。
property	指定用于转换效果CSS属性名称的逗号分隔列表。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

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

←CSS transition-duration 属性

CSS transition-timing-function 属性→

语法