使用CSS转换属性

矫情吗；* 2023-03-05 12:44 107阅读 0赞

## CSS | 过渡属性 **(**CSS | transitions Property**)** ##

When the **CSS property** changes the rendered result is immediately updated and the affected elements instantly change their old property value to the new property value. This approach describes a way to specify **transitions using CSS properties**. These properties are used to change smoothly from the old state to the new state.

当**CSS属性**更改时，渲染结果将立即更新，并且受影响的元素会立即将其旧属性值更改为新属性值。 这种方法描述了一种**使用CSS属性**指定**过渡的方法** 。 这些属性用于从旧状态平稳过渡到新状态。

**Basic Syntax:**

**基本语法：**

Element {
        
        transition: width 2s;
    }

**Below are the properties of the transition,**

**以下是过渡的属性，**

1.  transition-property
    
    过渡财产
2.  transition-delay
    
    过渡延迟
3.  transition-duration
    
    过渡持续时间
4.  transition-timing-function
    
    过渡计时功能

Now we will one by one see all these properties,

现在我们将逐一查看所有这些属性，

### 1)过渡属性 **(**1) transition-property**)** ###

This property specifies the name of the CSS property to which the transition is applied.

此属性指定过渡要应用到CSS属性的名称。

If the value is none it means that no property will transition. The keyword all means that all properties are to be transitioned, is given.

如果值为none，则表示没有任何属性会过渡。 关键字all表示所有属性都将被转换。

Every transition property accepts a comma-separated list that allows multiple transitions to be defined, each acting on a different property. Here the individual transitions take their parameters from the same index in all the lists.

每个过渡属性都接受一个逗号分隔的列表，该列表允许定义多个过渡，每个过渡都作用于不同的属性。 在这里，各个转换从所有列表的同一索引中获取其参数。

Property values for transition-property,

过渡属性的属性值，

*  **none**: none of the property will get the transition effects.
    
    **none** ：该属性均不会获得过渡效果。
 *  **all**: all the properties will get the transition effects.
    
    **all** ：所有属性都将获得过渡效果。
 *  **initial**: this value sets the property to its default initial value.
    
    **initial** ：此值将属性设置为其默认初始值。
 *  **inherit**: this value inherits property from its parent element.
    
    **继承** ：此值从其父元素继承属性。
 *  **property**: this is a transition effect value.
    
    **属性** ：这是一个过渡效果值。

**Example:**

**例：**

<!DOCTYPE html>
    <html>
    
    <head>
        <style>
            div {
        
                width: 50px;
                height: 50px;
                background: green;
                transition-property: width;
            }
            
            div:hover {
        
                width: 100px;
            }
        </style>
    </head>
    
    <body>
        <p>The transition property in CSS</p>
    
        <div></div>
    </body>
    
    </html>

**Output**

**输出量**

![transitions Property using CSS | Example 1][transitions Property using CSS _ Example 1]

In the above example, if we hover over the box it expands by 100px in width.

在上面的示例中，如果将鼠标悬停在框上，则框的宽度将扩大100px 。

### 2)过渡延迟 **(**2) transition-delay**)** ###

This CSS property specifies the amount of time that is needed to wait before the transition effect starts. Generally, the height starts transitioning immediately but the width waits for 1 second.

此CSS属性指定过渡效果开始之前需要等待的时间。 通常，高度立即开始转变，但宽度等待1秒钟。

If the transition value is 0 then the transition will start as soon as the property is changed.

如果过渡值为0，则属性更改后将立即开始过渡。

Property values for transition-delay,

过渡延迟的属性值，

*  **time**: it is the amount of time to wait before the transition effect starts.
    
    **time** ：过渡效果开始之前要等待的时间。
 *  **initial**: sets the property to its default initial value.
    
    **initial** ：将属性设置为其默认初始值。
 *  **inherit**: inherits the property from the parent element.
    
    **Inherit** ：从父元素继承属性。

**Example:**

**例：**

<!DOCTYPE html>
    <html>
    
    <head>
        <style>
            div {
        
                width: 75px;
                height: 75px;
                background: green;
                transition: width 3s;
                transition-delay: 1s;
            }
            
            div:hover {
        
                width: 300px;
            }
        </style>
    </head>
    
    <body>
        <p>Transition-delay property in CSS</p>
        <div></div>
    </body>
    
    </html>

**Output**

**输出量**

![transitions Property using CSS | Example 2][transitions Property using CSS _ Example 2]

In the above example, transition effect has a 1 second delay before starting when we hover over the green box.

在上面的示例中，当我们将鼠标悬停在绿色框上时，过渡效果在开始之前有1秒的延迟。

### 3)过渡持续时间 **(**3) transition-duration**)** ###

This CSS property specifies how long the transition from the old value to the new value should take. By default the value is 0 second, meaning that the transition is immediate.

此CSS属性指定从旧值到新值的过渡应花费的时间。 默认情况下，该值为0秒，表示过渡是立即的。

If the value is negative then it renders the declaration invalid.

如果该值为负，则使声明无效。

Property values for transition-duration,

过渡期的属性值，

*  **time**: amount on time transition effect takes to complete the transition.
    
    **time** ：完成过渡所需的时间过渡量。
 *  **initial**: sets the property to its default initial value.
    
    **initial** ：将属性设置为其默认初始值。
 *  **inherit**: inherits its property from its parent element.
    
    **Inherit** ：从其父元素继承其属性。

**Example:**

**例：**

<!DOCTYPE html>
    <html>
    
    <head>
        <style>
            div {
        
                width: 75px;
                height: 75px;
                background: green;
                transition-duration: 3s;
            }
            
            div:hover {
        
                width: 300px;
            }
        </style>
    </head>
    
    <body>
        <p>Transition-duration property in CSS</p>
        <div></div>
    </body>
    
    </html>

**Output**

**输出量**

![transitions Property using CSS | Example 3][transitions Property using CSS _ Example 3]

In the above example, the duration is 3s over which the transition must take place.

在上面的示例中，持续时间为3s ，必须在此持续时间上进行过渡。

### 4)过渡计时功能 **(**4) transition-timing-function**)** ###

This CSS property specifies how the intermediate values used during a transition will be calculated. This property allows the transition to change speed with respect to the duration. These effects are also called easing functions.

此CSS属性指定如何计算过渡期间使用的中间值。 此属性允许过渡相对于持续时间更改速度。 这些效果也称为缓动函数。

Property values for transition-timing-function,

过渡计时功能的属性值，

*  **ease**: it defines transition effect with a slow start and then fast.
    
    **easy** ：它定义了从缓慢开始然后快速开始的过渡效果。
 *  **linear**: it defines transition effect with the same speed from start to end.
    
    **linear** ：从开始到结束以相同的速度定义过渡效果。
 *  **ease-in**: it defines transition effect with slow speed at the start.
    
    **easy-in** ：它定义了开始时速度较慢的过渡效果。
 *  **ease-out**: it defines transition effect with slow speed at the end.
    
    **easy-out** ：它定义了过渡效果，但最终速度较慢。
 *  **ease-in-out**: it defines transition effect with slow speed at the start and end both.
    
    **easy-in-out** ：它定义了在开始和结束时都以慢速进行的过渡效果。
 *  **step-start**: it is equivalent to **steps(1,start)**.
    
    **step-start** ：等效于**steps(1，start)** 。
 *  **step-end**: it is equivalent to **steps(1,end)**.
    
    **step-end** ：等效于**steps(1，end)** 。
 *  **cubic-bezier()**: it is used to define your values from 0 to 1 in the function.
    
    **cube-bezier()** ：用于定义函数中从0到1的值。
 *  **initial**: sets the property to its default initial value.
    
    **initial** ：将属性设置为其默认初始值。
 *  **inherit**: inherits its property from its parent element.
    
    **Inherit** ：从其父元素继承其属性。

**Example:**

**例：**

<!DOCTYPE html>
    <html>
    
    <head>
        <style>
            div {
        
                width: 75px;
                height: 75px;
                background: green;
                transition-duration: 3s;
                transition-timing-function: linear;
            }
            
            div:hover {
        
                width: 300px;
            }
        </style>
    </head>
    
    <body>
        <p>Transition-timing-function property in CSS</p>
        <div></div>
    </body>
    
    </html>

**Output**

**输出量**

![transitions Property using CSS | Example 4][transitions Property using CSS _ Example 4]

In the above example, the linear transition-timing-function is applied.

在上面的示例中，应用了线性跃迁定时功能 。

> 翻译自: [https://www.includehelp.com/code-snippets/transitions-property-using-css.aspx][https_www.includehelp.com_code-snippets_transitions-property-using-css.aspx]

[transitions Property using CSS _ Example 1]: https://www.includehelp.com/code-snippets/Images/transitions-property-css-example-1.jpg
[transitions Property using CSS _ Example 2]: /images/20230208/aacfd6d216d24978b60df821e3b64e74.png
[transitions Property using CSS _ Example 3]: /images/20230208/5630dee7e86c40d286a2ecf7e52c8291.png
[transitions Property using CSS _ Example 4]: /images/20230208/cc27860943c349939cbd398e776e6aec.png
[https_www.includehelp.com_code-snippets_transitions-property-using-css.aspx]: https://www.includehelp.com/code-snippets/transitions-property-using-css.aspx