CSS3的【transition-duration】属性

最新推荐文章于 2025-06-18 15:22:32 发布

汶逗逗

最新推荐文章于 2025-06-18 15:22:32 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： css3 用户体验鼠标

本文链接：https://blog.youkuaiyun.com/weixin_37986839/article/details/77100508

CSS3 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了CSS3中transition属性的应用方法，包括transition的基本概念、四种属性的具体含义及使用技巧，并通过实例展示了如何实现平滑的过渡效果。

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

最近在学bootstrap，写CSS时用到

.classicon:hover{
    background: #c7ddef;
    opacity: 0.8;
    transition-duration:0.5s;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;

transition三种方式都可以使用，都是可以使鼠标滑过页面时，前面被设置透明度为0的内容透明度改变，内容渐渐浮现。

这段内容主要用到CSS3的transition属性，第一种规规矩矩，第二种简单粗暴直接告诉transition设置透明度opacity在0.5秒内渐渐变化为后期设置的透明度参数：0.8.第三种是为了防止浏览器不兼容。

【transition-duration】

CSS3属性，规定完成过度效果需要花费的时间（时间可以自己设置，我个人建议小于等于1秒，这样用户体验会好些）。

语法：transition-duration: time;
time ：规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。

事实上，transiton是有四个属性，分别如下：

transition-property (执行变换的属性 )

transition-duration (变换延续时间)

transition-timing-function (延续时间内，变换速率的变化)

transition-delay (变换延迟时间)

代码演示：

1). 过渡单个属性：
transition-property:opacity;
transition-duration:2s;
transition-timing-function:ease-in;
transition-delay:0;

2). 过渡多个属性：
[1]. 上下一一对应型：
transition-property:opacity left;
transition-duration:2s, 4s;
transition-timing-function:ease-in;
transition-delay:0;

此时：opacity过渡时间为2s，left过渡时间为4s。

[2]. 循环对应型：
transition-property:opacity left width height;
transition-duration:2s, 4s;
transition-timing-function:ease-in;
transition-delay:0;

此时：opacity和width过渡时间为2s，left和height过渡时间为4s。

3). transition简写模式：
顺序为：transition-property transition-duration transition-timing-function transition-delay
/*单个属性：*/
-moz-transition:background 0.5s ease-out 0s;
/*多个属性：*/
-moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;