css过渡效果
目录
一、适用范围
二、常用属性
1、过渡属性（transition-property）
2、过渡时间（transition-duration）
3、过渡方式、函数（transition-timing-function）
4、延迟运动（transition-delay）
二、代码
一、适用范围
--transition可以达到过渡效果
--过渡效果只能针对于存在可计算的属性，比如高度、像素、颜色等等
--不可计算属性不能设置
--auto值也不能设置
二、常用属性
1、过渡属性（transition-property）
（1）可以设置height、width等，多属性用逗号分隔，表示对哪个属性添加过渡效果
（2）all表示设置所有属性
2、过渡时间（transition-duration）
可以设置为秒或者毫秒
3、过渡方式、函数（transition-timing-function）
（1）常用值
--ease慢速开始，加速到中间速度最大，然后减速
--linear匀速
--ease-in加速
--ease-out减速
--ease-in-out先加速后减速
（2）时序函数
--cubic-bezier()
--可以上该网站查看细则https://cubic-bezier.com
（3）steps分步骤运动
--第一个参数表示分几步，为数字
--第二个参数表示在步骤的开始或者结束进行运动，有strat、end等
4、延迟运动（transition-delay）
--通过设置时间来延迟运动开始的时间
二、代码
<!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" />
<title>过渡</title>
<style>
/*
transition可以达到过渡效果，过渡效果只能针对于存在可计算的属性，比如高度、像素、颜色等等
不可计算属性不能设置
auto值也不能设置
transition有四个常用属性：
1.transition-property过渡属性
可以设置height、width等，多属性用逗号分隔
all表示设置所有属性
2.transition-duration过渡时间
3.transition-timing-function过渡方式
ease慢速开始，加速到中间速度最大，然后减速
linear匀速
ease-in加速
ease-out减速
ease-in-out先加速后减速
cubic-bezier()时序函数
可以上该网站查看https://cubic-bezier.com
steps分步骤运动
第一个参数表示分几步
第二个参数表示在步骤的开始或者结束进行运动
4.transition-delay延迟运动
通过设置时间来延迟运动开始的时间
*/
.box1 {
width: 800px;
height: 800px;
background-color: silver;
transition-timing-function: steps(2, end);
}
.box2 {
transition: all 2s;
transition-delay: 2s;
width: 100px;
height: 100px;
background-color: red;
}
.box3 {
transition: all 2s;
margin-top: 200px;
width: 100px;
height: 100px;
background-color: blue;
}
.box1:hover div {
margin-left: 700px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>