CSS中过渡transition——元素变化时的切换方式

燕穗子博客

已于 2022-04-14 08:35:53 修改

阅读量759

点赞数 3

分类专栏： CSS 文章标签： css java 开发语言 vscode javascript

于 2022-04-13 10:30:30 首次发布

本文链接：https://blog.csdn.net/m0_64346035/article/details/124142008

版权

CSS 专栏收录该内容

49 篇文章 7 订阅

订阅专栏

过渡（transition）[træn'siʒən]

-通过过渡可以指定一个属性发生变化时的切换方式

-通过过渡可以创建一些非常好的效果，提升用户体验

一、属性（4个）

(1)transition-property ['prɔpəti] 指定执行过渡的属性，多个属性，使用逗号隔开，

如果所有的属性都要过渡，就使用all关键词，大部分属性都支持过渡效果

注意过渡时，必须是从一个有效数值向另一个有效数值进行过渡

只要值可以计算的，就可以过渡

(2)transition-duration [djuə'reiʃən] 指定过渡效果的持续时间

时间的单位：s和ms 1s=1000ms

(3)transition-timing-function: ;过渡的时序函数，指定过渡的执行的方式

可选值：

ease [i:z] 默认值，慢速开始，先加速，然后再减速

linear 匀速运动

ease-in 慢速开始，加速运动

ease-out 快速开始，减速运动

ease-in-out 先加速，后减速

steps()分布执行过渡效果

可以设置一个第二个值

end，在时间结束时执行过渡（默认值）

start，在时间开始时执行过渡

(4)transition-delay: ;过渡效果的延迟，等待一段时间后执行过渡

总结：

transition：；可以同时设置过渡相关的所有属性，

只有一个要求，如果要写延迟，则两个时间中,第一个写延迟，第二个写持续时间

二、代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /* 底部幕布 */
        .box1{
            width: 600px;
            height: 600px;
            background-color: silver;
        }
        .box1>div{
            width: 100px;
            height: 100px;
            margin-bottom: 50px;
            margin-left: 0;
        }
        .box2{
            background-color: #bfa;
            transition-property: all;/* 过渡的属性 */
            transition-duration: 2s;/* 过渡持续时间 */
            transition-timing-function:ease-in-out;/* 过渡方式 */
            /* transition-delay:2s ;过渡延迟 */
             /* 简写 */
            /* transition: all 2s; */
        }
        .box3{
            background-color: tomato;
            transition-property: all;
            transition-duration: 2s;
            transition-timing-function: steps(3);
        }

        /* 触发时机 */
        .box1:hover  .box2{
            margin-left: 500px;
            background-color: red;
        }
        .box1:hover  .box3{
            margin-left: 500px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>