过渡属性transition详解

最新推荐文章于 2025-03-25 19:43:39 发布

杏黄的三叶草

最新推荐文章于 2025-03-25 19:43:39 发布

阅读量9.3k

点赞数 1

分类专栏： Web前端CSS

本文链接：https://blog.csdn.net/dwjdj/article/details/104101736

版权

Web前端CSS 专栏收录该内容

37 篇文章

订阅专栏

本文详细探讨了CSS中的transition属性，包括如何定义过渡效果、指定过渡时长、延迟和属性，以及在网页动效设计中的应用实例。通过学习，读者将能够熟练掌握创建平滑动态效果的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般transition属性设置在默认状态中。
☞ 过渡属于一种特殊的动画
☞ 通过一种状态向另外一种状态的改变
transition-property属性：
用于指定过渡效果的CSS属性的名称，其过渡效果通常在用户将鼠标移动到元素上时发生
transition:none|(没有属性会获得过渡效果)
           all|(所有属性获得过渡效果)
           property(过渡效果CSS属性的名称，多个名称之间用逗号隔开)

transition-duration属性：
定义完成过渡效果所需时间，默认为0，单位有s|ms
transition-duration:时间

transition-timing-function属性：
定义过渡效果中速度的变化
transition-timing-function:linear|(匀速)
                           ease|(慢-快-慢)
                           ease-in|(慢-快)
                           ease-out|(快-慢)
                           ease-in-out(慢-慢)

transition-delay属性:
定义过渡的延迟时间
transition-delay:time;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*默认状态*/
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transition-property: all;
            transition-duration: 2s;
            transition-timing-function: linear;
            transition-delay: 2s;
        }
        /*结束状态*/
        div:hover{
            width: 400px;
            height: 400px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

在这里插入图片描述

transition属性的联写：
transition:property duration timing-function delay;
时间属性不能颠倒顺序(先是过渡持续时间，再是延迟时间)，其他可以
如果使用transition简写属性设置多个过渡效果，需要为每个过渡属性集中指定所有的值，并用逗号隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*默认状态*/
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transition: width 1s linear,height 1s linear 1s,background-color 1s linear 2s;
        }
        /*结束状态*/
        div:hover{
            width: 400px;
            height: 400px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>