transition 过渡

发布时间：2023-03-18 14:02:11 所属栏目：教程来源：

导读：transition 过渡
如果想做出细腻的过渡效果，那么这个属性可能会满足你的需求。这个属性简单的来说就是用来模拟需要变化的属性，从开始到结束数值之间的过渡。

1. 官方定义
transition 属性是一个简写属性，用于

transition 过渡
如果想做出细腻的过渡效果，那么这个属性可能会满足你的需求。这个属性简单的来说就是用来模拟需要变化的属性，从开始到结束数值之间的过渡。

1. 官方定义
transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay
2. 解释
transition 用来设置一个属性状态从开始到结束中间这个过程的变化。它是 transition-property、transition-duration、transition-timing-function、transition-delay、这四个属性的缩写。它们分别代表了：要使用过度动画的属性、过渡动画的时间、过渡动画的加速度函数即数值变化的快慢过程、过渡动画的延迟时间。而我们通常使用过渡属性完成元素过渡的这个过程一般使用 transition 。

3. 语法
.demo{
transition: property duration timing-function delay;
}
属性值说明：

属性值   描述
transition-property   规定设置过渡效果的 CSS 属性的名称。
transition-duration   规定完成过渡效果需要多少秒或毫秒。
transition-timing-function   规定速度效果的速度曲线。
transition-delay   定义过渡效果何时开始。
4. 兼容性
IE   Edge   Firefox   Chrome   Safari   Opera   ios   android
9+   12+   28+   4+   6.1+   12.1+   7+   4.4
5. 实例
1. 当鼠标移动到元素上，使用过渡属性来让元素的高度变化，从而实现一个过渡效果。

<div class="demo"></div>
.demo{
width: px;
height: px;
background: #000;
transition: height s;
}
.demo:hover{
height: px;
}
`hover` 之后高度变化效果图
当鼠标移动上去改变元素的宽高值，让它们都实现过渡动画。
写法一：

.demo{
width: px;
height: px;
background: #000;
transition: height s,width s;
}
.demo:hover{
width: px;
height: px;
}
写法二：

.demo{
width: px;
height: px;
background: #000;
transition: all s;
}
.demo:hover{
width: px;
height: px;
}
`hover` 宽高变化效果图
说明：这两种方式都可以实现我们所要的过渡方式。不过这里推荐使用第一种方式。

改变上面过渡完成的速度。
.demo{
width: px;
height: px;
background: #000;
transition: height s ease-in,width s ease-out;
}
.demo:hover{
width: px;
height: px;
}
改变过渡完成的速度效果图
说明：在 transition 第三个值使用了动画函数，改变了过渡过程中完成的速度，我们可以很清楚的看到他们的变化速度。

当鼠标移动上去 1s 之后开始动画。
.demo{
width: px;
height: px;
background: #000;
transition: height s ease-in s,width s ease-out s;
}
.demo:hover{
width: px;
height: px;
}
时间设置效果图
说明：我们可以看到鼠标放到元素上 1s 之后开始动画，而离开元素之后 1s 之后开始动画。

6. Tips
通过上面的实例可以知道 transition 的属性值配置很灵活，但是我们要遵循一定的规律，这不单是增加了代码的可读性，也符合浏览器解析规则的规律。

hover 到按钮上改变按钮的位置和背景颜色。

<button class="demo"></button>
.demo{
width: px;
height: px;
line-height: px;
border-radius: px;
background: #000;
color:#fff;
border:none;
transition: background s,transform s;
}
.demo:hover{
background: red;
transform: translateY(-px);
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!