css过渡属性

前言

过渡属性是CSS中一个比较重要的属性，我们常常利用过渡来让元素在某些场景下实现动画效果（注意，只是动画效果，不是动画）。本文将对过渡属性中常用的特性进行介绍。

一、过渡的使用场景

我们看下面的css代码，当box1处于hover状态时，box1高度和宽度将变大，且背景颜色变为红色。在没有使用过渡效果时，我们可以看到，当鼠标悬浮在container元素上面时，box1的样式马上就发生了改变。如果我们想要让这个元素的样式马上就发生变化，而是想让它以一种过渡的效果慢慢地转移到另外一种样式这时候，我们就可以使用过渡这个属性了

css代码

.container{
    width: 800px;
    height: 800px;
    background-color: gray;
}
.box1{
    width: 100px;
    height: 100px;
    background-color: green;
}
.container:hover .box1{
    width: 200px;
    height: 200px;
    background-color: red;
}

html代码

<body>
    <div class="container">
        <div class="box1"></div>
    </div>
</body>

二、过渡的常用属性

（一）transition-property

这个属性用于指定要执行过渡的属性，一般来说大部分css属性都支持过渡效果，使用该属性时需要注意三点：
（1）过渡时必须是从一个有效数值向另外一个有效数值进行过渡（很重要的原则，需要记住）
（2）多个属性间使用,隔开
（3）如果所有属性都需要过渡，则使用all关键字

我们在上面案例的基础上，调整一下box1的属性。注意，我们只给高度和宽度加了过渡效果，没有给背景颜色加。transition-duration属性为过渡的持续时间，下面会详细介绍。

.box1{
    width: 100px;
    height: 100px;
    background-color: green;
    transition-property: height,width;
    transition-duration: 2s;
}

我们可以看到，一触发box1的样式变动，box1的长度和宽度都是经过了2s的时间才完成变化，而背景颜色由于没有设置过渡效果，所以是直接就变化了。

（二）transition-duration

这个属性用于指定过渡效果的持续时间，时间单位可以选择s 或者ms （1s = 1000ms），时间越长，过渡的动画效果就会越慢。

（三）transition-delay

这个属性用于设置过渡效果的延迟，让过渡效果等待一段时间后再执行。

css设置延迟时间2s

.box1{
    width: 100px;
    height: 100px;
    background-color: green;
    transition-property: height,width;
    transition-duration: 2s;
    transition-delay: 2s ;
}

我们可以看到，box1元素的宽高都是在2s之后才开始过渡到另外的样式上。

（四）transition-timing-function

transition-timing-function 属性用于指定过渡的时序函数，所谓时序函数，是用来定义过渡持续时间中，以什么样的速度来进行过渡。比较常见的有：

linear 匀速运动
ease 默认值，先加速，再减速
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速，再减速
cubic-bezier()
如果上面这些常见的时序函数都不能满足要求，我们可以通过自定义时序函数的方法来设置过渡的速度。
指定时序函数，我们可以借助 https://cubic-bezier.com 网站来帮助我们快捷生成贝塞尔曲线函数。
step()分步执行过渡效果
step函数可以传第二个可选参数：
end ，在时间结束时执行过渡(默认值)
start ，在时间开始时执行过渡

下面我们就用step和linear来做一个简单的案例演示。

box1为分步执行过渡效果，box2为匀速执行过渡效果，我们可以很清晰地在效果图中看到二者的区别。

.container{
    width: 800px;
    height: 800px;
    background-color: gray;
}
.box1{
    transition-timing-function: steps(3)
}
.box2{
    margin-top: 100px;
    transition-timing-function: linear
}
.container:hover>div{
    margin-left: 700px;
    background-color: red;
}
.container>div{
    width: 100px;
    height: 100px;
    background-color: green;
    margin-left: 0px;
    transition-property: all;
    transition-duration: 5s;
}

（五）transition

transition可以同时设置过渡相关的所有属性，需要注意的是，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间。比如:

transition-timing-function: steps(3);
transition-property: all;
transition-duration: 5s;

等价于下面这条

transition: steps(3) 5s all;

说在最后

以上即为css过渡效果常用的属性，我们常常会在用户选择或者鼠标悬浮某些元素上面时进行一些元素的高亮操作，这时候使用过渡效果往往可以让页面整体的流畅度更好，提高用户体验。各位小伙伴在进行前端开发可以考虑适当加入该属性。

posted @ 2022-03-23 19:38 moutory 阅读(28) 评论(0) 编辑收藏举报来源

刷新页面返回顶部