浅谈css的过渡效果transition的使用

CSS 的transition允许您对 CSS 属性的更改进行动画处理，这对于在网站上创建平滑和视觉上吸引人的效果非常有用。

要创建一个过渡，您需要使用 transition 属性。该属性允许您指定要过渡的 CSS 属性，以及过渡的持续时间、时间函数和延迟。以下是 transition 属性的语法：

transition: property duration timing-function delay;

• property：这是您要过渡的 CSS 属性的逗号分隔列表。例如，background-color 或 width。
• duration：这是过渡所需的时间长度，以秒（s）或毫秒（ms）为单位。例如，1s 或 500ms。
• timing-function：这控制过渡的变化速率。有几个内置的时间函数可用，例如 ease、linear、ease-in、ease-out 和 ease-in-out。您还可以使用 cubic-bezier()函数创建自定义时间函数。
• delay：这是在开始过渡之前等待的时间量，以秒（s）或毫秒（ms）为单位。例如，0.5s 或 250ms。

以上属性可以简写在transition中，如果单独设置需要添加 transition 前缀，例如：transition-duration.

一个简单的小栗子，请使用鼠标划过这个盒子

代码如下：

<style>
    /* 添加一个过渡效果 */
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: all 2s ease-in 0.5s;
    }

    /* 鼠标悬停时改变宽度 */
    .box:hover {
        width: 300px;
        height: 200px;
        background-color: blue;
        transform: rotate(180deg);
        opacity: 0.5;
    }
</style>
<div class="box"></div>

需要注意的是，并非所有属性都可以过渡。以下是一些不能过渡的属性：

• display：此属性控制元素在页面上的显示方式，不能过渡。
• visibility：此属性控制元素是否可见，不能过渡。
• height和width（当设置为auto时）：当这些属性的值设置为auto时，不能过渡。
• margin和padding（当设置为auto时）：当这些属性的值设置为auto时，不能过渡。
• background-image：此属性不能直接过渡，但是您可以过渡background-position属性以创建类似的效果。

这不是详尽无遗的列表，可能还有其他不能过渡的属性。如果您不确定某个属性是否可以过渡，可以尝试一下，看看是否有效。

至此，您对css的transition应该有了一个了解。