20、animation——transition过渡的使用
2022-06-06 本文已影响0人
小黄不头秃
一、transition 过渡
过渡（transition）
当某元素某属性发生变化时，将切换方式变成连续的。
可以创建一些效果。
- transition-property: ;指定执行的属性
- transition-duration: ;过渡持续时间
- transition-timing-function: ;过度的时间函数
可选值：
ease慢-快-慢
linear匀速
ease-in慢速开始
ease-out减速运动
ease-in-out先加速后减速 - cubic-bezier（）指定时间函数
- steps（）执行步骤
- transition-delay: ;过渡效果延时，等待响应时间
二、代码
鼠标进入box1，触发transition，右移且放大。鼠标移出则变回原来的状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.box1{
width: 800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box1 div{
width: 100px;
height: 100px;
margin-bottom: 100px;
}
.box2
{
background-color: #bbffaa;
/* transition: height 2s; */
transition: all 2s;
/* transition-property: width,height,color,margin-left; */
transition-duration: 1s;
transition-timing-function:unset;
transition-delay:200ms;
}
.box1:hover .box2
{
width: 200px;
height: 200px ;
background-color: tomato;
margin-left: 500px; ;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
31.jpg
32.jpg
