CSS3过渡属性transition详解

最新推荐文章于 2023-03-29 23:32:29 发布

桃花扇J

最新推荐文章于 2023-03-29 23:32:29 发布

阅读量1.3k

点赞数 2

分类专栏： CSS3 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44584442/article/details/105333048

版权

CSS3 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

拖了两天的更新诶，懈怠了懈怠了

transition蛮好玩的，可以实现由一个状态像另一个状态的动画过渡，无缝斜街的感觉，不多说啦，开始介绍属性吧~

1.transition可以传4 / (4n)个参数，（4n是因为它可以对不同的属性分别加过渡效果）

第一位：设置参与过渡的属性

第二位：过渡的时间

第三位：过渡的动画类型（选填，默认ease）

第四位：开始过渡的延时（选填，默认0）

这里给个【例1】，为了知识点一目了然放后面啦

第二位和第四位填时间就好啦，接下来详细介绍一下第一位和第三位

2.第一位属性值

第一位通常填all，如【例1】，检测到所有的属性过渡，也可以分别填写某个属性【例2-1】，或者某几个属性【例2-2】

3.第三位属性值

通常有ease【例2-2】，linear【例2-1】，ease-in，ease-out，ease-in-out等，不过实质上是贝塞尔曲线，即可填cubic-bezier(num,num,num,num)【例3-1】该属性值去自定义设置过渡的动画类型

贝塞尔曲线我在下一节详细介绍，下面给例子吧

【例1】给hover添加过渡的效果，如下

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 100px;
            height: 100px; 
            background-color: #f88;
            position: absolute;
            left: 10px;
            top: 10px;
            opacity: 0.3;       
            transition: all 2s linear 0.5s;    
        }
        div:hover {
            width: 120px;
            height: 120px;
            background-color: #88f;
            top: 100px;
            left: 100px;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

【例2-1】只给颜色添加过渡的效果，如下

代码：修改【例1】代码的样式部分

div {
    width: 100px;
    height: 100px; 
    background-color: #f88;
    position: absolute;
    left: 10px;
    top: 10px;
    opacity: 0.3;       
    transition: background-color 2s linear 0.5s;    
}
div:hover {
    width: 120px;
    height: 120px;
    background-color: #88f;
    opacity: 1;
}

【例2-2】给宽度和高度设置不同的过渡效果，如下

代码：修改【例2-1】div的transition属性如下

div {
    width: 100px;
    height: 100px; 
    background-color: #f88;
    position: absolute;
    left: 10px;
    top: 10px;
    opacity: 0.3;       
    transition: width 2s linear 1s, height 4s ease 3s ;    
}

【例3-1】贝塞尔曲线

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
div {
    width: 100px;
    height: 50px; 
    background-color: #f88;
    position: absolute;
    left: 10px;
    top: 10px;
    opacity: 0.3;       
    transition: all 1s cubic-bezier(0,0,1,1);    
}
div:hover {
    width: 200px;
    background-color: #88f;
    opacity: 1;
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果

可以看出来，它是线性变化，此时的 s - t 图如下

transition还有step-start，step-end，steps()，几个属性，animation也有，后续放在animation中讲

桃花扇J

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS3过渡属性transition详解

拖了两天的更新诶，懈怠了懈怠了transition蛮好玩的，可以实现由一个状态像另一个状态的动画过渡，无缝斜街的感觉，不多说啦，开始介绍属性吧~1.transition可以传4 / (4n)个参数，（4n是因为它可以对不同的属性分别加过渡效果）第一位：设置参与过渡的属性第二位：过渡的时间第三位：过渡的动画类型（选填，默认ease）第四位：开始过渡的延时（选填，默认0）这...
复制链接

扫一扫

专栏目录