前言:
我们使用过渡时经常用到transition,尤其是这行代码:
transition: all 1s;
其实它的完整写法是:
transition: all 1s 0s linear;
执行效果:选中所有+时长1s+延迟0s+匀速移动;
1、案例展示:
创建一个盒子,装进图片,添加hover使鼠标移入盒子时盒子向下位移,添加标准过渡。
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color:red;
border: 1px solid skyblue;
transition: all 1s 0s linear;
margin: 100px auto;
}
div:hover{
transform: translateY(100px);
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<img src="./102799828_p0_master1200.jpg" alt="">
</div>
</body>
</html>
代码执行效果:
那么问题来了,执行速度总是匀速,有没有其他的速度曲线名词?
有的!
2、其他各类速度曲线
ease:慢-快-慢
transition: all 1s 0s ease;
ease-in:先慢-后越来越来快
transition: all 1s 0s ease-in;
ease-out:先快-后越来越慢
transition: all 1s 0s ease-out;
ease-in-out:速度在开始和结束时都很慢,中间不加速。
transition: all 1s 0s ease-in-out;
图片素材: