浅谈css的过渡效果transition的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了浅谈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>

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