HTML CSS 过渡效果

最新推荐文章于 2025-05-22 14:37:19 发布

原创最新推荐文章于 2025-05-22 14:37:19 发布 · 3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

web 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了HTMLCSS中的过渡效果，包括transition属性的使用，如指定过渡的属性、持续时间、时序函数和延迟时间。通过示例代码展示了如何实现元素在不同状态间的平滑过渡，如改变margin-left时的动画效果。同时，还讲解了transition-timing-function的各种可选值，如ease、linear、steps等，以及如何自定义cubic-bezier函数。最后，给出了一个实际的代码示例，演示了鼠标悬停时元素位置变化的过渡动画。

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

HTML CSS 过渡效果

1、transition

过渡（transition）： 通过过渡可以指定一个元素的属性在发生变化时的切换方式，从而创建一些非常好的效果，提升用户的体验。如：

transition: height 2s; /*当元素的高度放生变化时，需要花费两秒钟的时间来进行过渡。*/

这种方式可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个表示延迟时间。

transition: 2s margin-left 1s; /*表示当元素的margin-left属性值发生变化时，延迟1秒后，开始过渡，持续时间为2秒*/

2、另外一种设置的方式：

transition-property： 指定要执行过渡的属性，如：transition-property: width, height。

可以同时指定宽度和高度，多个属性之间使用逗号进行隔开，如果所有的属性都需要过渡，则可以使用 all 关键字，大部分的属性都支持过渡效果（基本上可计算的读可以设置），注意的是过渡是必须从一个有效值向另外一个有效值进行过渡，如auto就不是一个有效值，即它的值是不确定的；

transition-duration: 指定过渡效果的持续时间，如：transition-duration: 2s;指定持续时间为2秒。

时间单位：s和ms，1s = 1000ms，也可以为transition-property的多个属性之间分别设置不同的过渡时间，通过transition-duration属性指定多个值，中间使用逗号隔开，这里多个值之间的顺序和transition-property指定的属性之间一一对应；

transition-timing-function： 指定过渡的时序函数，即过渡的执行方式，可选值如下：

ease，默认值，慢速开始，先加速，后减速；
linear，匀速运动；
ease-in，加速运动；
ease-out，减速运动；
ease-in-out，先加速，后减速；
cubic-bezier()，来指定时序函数，如：transition-timing-function: cubic-bezier(0,0,1,1);其中的值可以在https://cubic-bezier.com/网址中进行获取；
steps()，分步执行过渡效果；如transition-timing-function: steps(2);分两步来执行过渡效果，在steps函数中可以指定两个值，第一个指定的是过渡的步数，第二个指定是在某个时间之前还是之后执行，可选值：start、end（默认值）。如：steps(2, start)可以理解为在第一秒开始之前走第一步，在第二秒开始之前走第二步；

transition-delay： 过渡效果的延迟，即等待多长一段时间之后开始执行过渡效果。如：transition-delay: 2s;表示等待2秒钟之后开始执行过渡效果；

练习代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100%;
            height: 500px;
            background-color: silver;
        }
        .box1 div{
            width: 100px;
            height: 100px;
        }
        .box2{
            background-color: #bfa;
            margin-bottom: 100px;
            /* transition: all 2s; */
            /* transition-property: width, height; */
            margin-left: 0;
            /* transition-duration: 2s; */
            /* transition-timing-function: steps(2, end); */
            /* transition-delay: 2s; */
            transition: 2s margin-left 1s;
        }
        .box3{
            margin-left: 0;
            background-color: orange;
            transition-property: all;
            transition-duration: 2s;
        }
        .box1:hover .box2,
        .box1:hover .box3{
            margin-left: 1266px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>