CSS transition过渡属性-之路教程

语法

transition: transition-property | transition-duration | transition-timing-function |  transition-delay | initial | inherit;

带有 :active 伪类的 transition 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #8ebf42;
        -webkit-transition: width 2s;
        -moz-transition: width 2s;
        -o-transition: width 2s;
        transition: width 2s;
      }
      div:active {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition 属性示例</h2>
    <p>Click and hold to see the transition effect.</p>
    <div></div>
  </body>
</html>

带有 :hover 伪类的 transition 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        background-color: #fff;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .element {
        padding: 20px;
        width: 50px;
        height: 50px;
        left: 0;
        background-color: #8ebf42;
        position: relative;
        -webkit-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
        -moz-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
        -o-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
        transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      }
      .example:hover .element {
        left: 400px;
        background-color: #1c87c9;
      }
      .element-2 {
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
      }
    </style>
  </head>
  <body>
    <h2>Transition 属性示例</h2>
    <div class="example">
      <p>Hover over the container to see the transition effect.</p>
      <div class="element element-1"></div>
      <p>No transition:</p>
      <div class="element element-2"></div>
    </div>
  </body>
</html>

CSS transition过渡属性

过渡 CSS 属性是以下属性的简写属性：

transition-property
transition-duration
transition-timing-function
transition-delay

过渡属性是 CSS3 属性之一。

应首先指定 transition-duration ，因为默认情况下，它将为 0 并且该属性不会产生影响。

属性用逗号分隔。

如果指定了多个转换并且任何转换的转换属性为“none”，则声明无效。

过渡属性允许指定元素的两个状态之间的过渡。
可以使用 :hover 或者 :active 等伪类或者在 JavaScript 的帮助下定义不同的状态。

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

初始值	所有0s轻松0s
应用于	所有元素，以及 ::before 和 ::after伪元素。
继承	无效
可动画的	无效
版本	CSS3.
DOM 语法	object.Style.Transition =“全3S”;

CSS transition 属性值说明

值	描述
transition-property	指定转换的属性的名称。
transition-duration	指定转换动画的持续时间。
transition-timing-function	指定从一个值转换到另一个值的对象的速度。
transition-delay	指定在动画转换效果之前等待的时间量。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

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

←CSS transition-timing-function 属性

CSS unicode-bidi 属性→

语法

带有 :active 伪类的 transition 属性示例：

带有 :hover 伪类的 transition 属性示例：

CSS transition 属性值说明

目录