transition的使用方法

最新推荐文章于 2024-04-25 16:16:15 发布

鸦哈

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量3.6k

点赞数 4

分类专栏： html 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_63482686/article/details/127281874

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css过渡

css的过渡就是平滑的改变一个元素的css值，使元素从一个样式逐渐过渡到另外一个样式(我认为说白了就是动画)。

要想实现这样的效果必须规定如下两个内容：

1.规定应用过渡的css属性名称。

2.规定过渡效果的时长。

css的过渡使用transition属性来定义，transition属性的基础语法如下：

transition: property duration timing-function delay;

transition 属性可以实现简单的动画效果，但是如果想要实现更加复杂的动画效果，可以使用css3中的animation和@keyframes。

transition 的子属性

property，规定应用过渡的css属性的名称。允许的取值有三种：

1.none，没有属性会获得过渡效果。

2.all，默认值，所有的属性都会获得过渡效果。

3.property，定义应用过渡效果的css属性名称列表。

duration，定义过渡效果花费时间，允许的取值有一种

1.time值，以秒或毫秒计，默认是0，意味着没有效果。

timing-function，规定过渡效果的时间曲线，允许取值有6种

1.linear，规定相同的速度开始至结束的过渡效果。相当于cubic-bezier(0,0,1,1)

2.ease，是默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果。相当于cubic-bezier(0.25,0.1,0.25,1)

3.ease-in，规定以慢速开始的过渡效果。相当于cubic-bezier(0.42,0,1,1)

4.ease-out，规定以慢速结束的过渡兄啊过，相当于cubic-bezier(0,0,0.58,1)

5.ease-in-out,规定以满树开始和结束，相当于cubic-bezier(0.42,0,0.58,1)

6.cubic-bezier(x1,y1,x2,y2),数值是自己定义的(我会在后面一点说一下)。

delay，规定效果开始前需要等待的时间，允许取值有一种

1.time值，以秒或者毫秒计，默认是0。

cubic-bezier如何使用

这个函数中的x1和y2可以看成一个点，剩下的一个是另外一个点，然后将一条曲线向最近的点弯曲。然后k值就是速度。

第一个图是先慢后快，第二个图是先快后慢。

代码

这是一个最基本的，其实transition的all都可以省去，这一个transition的目标是all，所以后面有改变的都会有一个变化的动画，比如width，height，background，其他的也是差不多的了。

这里面的property，timing-function的位置可以任意交换，但是duration和delay的位置都是先duration在delay前面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .yi{
            width: 200px;
            height: 200px;
            background: gray;
            margin: auto;
            transition: all 1s;
        }
        .yi:hover{
            width: 500px;
            height: 500px;
            background: gainsboro
        }
    </style>
</head>
<body>
<div class="yi">

</div>
</body>
</html>

一个先慢后快再慢的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .yi{
            width: 200px;
            height: 200px;
            background: gray;
            margin: auto;
            transition:  2s  all cubic-bezier(1,0,0,1);
        }
        .yi:hover{
            width: 500px;
            height: 500px;
            background: gainsboro
        }
    </style>
</head>
<body>
<div class="yi">

</div>
</body>
</html>

鸦哈

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
transition的使用方法

这是一个最基本的，其实transition的all都可以省去，这一个transition的目标是all，所以后面有改变的都会有一个变化的动画，比如width，height，background，其他的也是差不多的了。2.ease，是默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果。4.ease-out，规定以慢速结束的过渡兄啊过，相当于cubic-bezier(0,0,0.58,1)css的过渡就是平滑的改变一个元素的css值，使元素从一个样式逐渐过渡到另外一个样式(我认为说白了就是动画)。
复制链接

扫一扫

专栏目录