transition过渡

页面元素如果要做变化效果，比如鼠标悬浮后元素长度从20变成40。此时如果没有给该元素添加过渡效果，就会发现元素瞬间变长，但是如果添加了过渡效果我们就可以看到变化过程。这样给用户的体验也将会更好。

   transition: 要过渡的属性 花费的时间 运动曲线 何时开始；

要过渡的属性：width heigth 背景颜色等都可以，如果想要所有的属性都有过渡效果可以将这里设置为all

花费的时间：元素从一个状态变为另一个状态的时间 0.3s 单位是秒单位必须写

运动曲线：默认是ease(可以省略)

何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是 0s （可以省略）

口诀：谁做过渡给谁加


<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>CSS3过渡效果</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费的时间 运动曲线 何时开始 */
            transition: width .5s;
        }
        
        div:hover {
            width: 400px;
        }
    </style>
</head>
 
<body>
    <div></div>
</body>

注：一定要明确变换最终状态，比如上面代码鼠标悬浮后div的最终状态是width是400px，中间过程不用关心。

如果想给多属性添加过渡效果可以用逗号隔开。如下：

transition: width .5s, height .5s;

此时记住要最终状态要设置width和height两个。

相关阅读:
实战模拟│企业微信机器人实时报错预警
从下载镜像到装系统（MSDN 和软碟通）
新一代网状网协议T-Mesh无线通信技术优势介绍
WPF程序打包
大数据批量处理神器 - 自定义周期批量消费队列的实现
Linux：虚拟地址空间，程序和进程，创建并回收子进程，孤儿进程和僵尸进程。为什么要回收子进程？
BeanFactory与ApplicationContext
Axure9数字加减交互案例
Kafka高性能
Linux软件管理RPM的使用

原文地址：https://blog.csdn.net/LH2HA3/article/details/125537305