*transition这个属性添加在谁的身上就在谁的身上发生变化！！！注意：不要加在hover上！！！*
例如：在box盒子上就在box盒子上变化
1、瞬间变长，看不到过程
<!DOCTYPE html> <!--文档类型-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>过渡属性transition</title>
<!---->
<style>
.box{
width: 300px;
height: 50px;
background-color: green;
}
.box:hover{
width: 600px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2、水平垂直的过渡效果一样的，可以看到过程。(一般用这个）
过渡属性：transition: all 1s;
过渡属性：transition: all .3s; (一般用这个）更快
<!DOCTYPE html> <!--文档类型-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>过渡属性transition</title>
<!---->
<style>
.box{
width: 300px;
height: 50px;
background-color: green;
transition: all 1s;
}
.box:hover{
width: 600px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3、过渡效果，可以看到过程。
水平的过渡效果，垂直是瞬间过渡效果属性：transition: width 1s;
<!DOCTYPE html> <!--文档类型-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>过渡属性transition</title>
<!---->
<style>
.box{
width: 300px;
height: 50px;
background-color: green;
transition: width 1s;
}
.box:hover{
width: 600px;
height: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
4、水平与垂直效果不一样的，过渡过程
过渡效果属性：transition: width 1s,height 2s;
<!DOCTYPE html> <!--文档类型-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>过渡属性transition</title>
<!---->
<style>
.box{
width: 300px;
height: 50px;
background-color: green;
transition: width 1s,height 2s;
}
.box:hover{
width: 600px;
height: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
5、transition：要发生变化的属性名 发生过渡时间 动画曲线（先快，后慢；先慢，后快）；
transition: all 10s;
<!DOCTYPE html> <!--文档类型-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>过渡属性transition</title>
<!---->
<style>
.box{
width: 300px;
height: 50px;
background-color: green;
transition: all 10s;
}
.box:hover{
width: 600px;
height: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
6、
transition：要发生变化的属性名 发生过渡时间 动画曲线（先快，后慢；先慢，后快）；
transition: all 10s linear;
<!DOCTYPE html> <!--文档类型-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>过渡属性transition</title>
<!---->
<style>
.box{
width: 300px;
height: 50px;
background-color: green;
transition: all 10s linear;
}
.box:hover{
width: 600px;
height: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
7、
transition: all 10s ease;
<!DOCTYPE html> <!--文档类型-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>过渡属性transition</title>
<!---->
<style>
.box{
width: 300px;
height: 50px;
background-color: green;
transition: all 10s ease;
}
.box:hover{
width: 600px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
8、transition：要发生变化的属性名 发生过渡时间 动画曲线（先快，后慢；先慢，后快）过渡的延迟时间；
延迟2s后,再过渡
transition: all 10s linear 2s;
<!DOCTYPE html> <!--文档类型-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>过渡属性transition</title>
<!---->
<style>
.box{
width: 300px;
height: 50px;
background-color: green;
transition: all 10s linear 2s;
}
.box:hover{
width: 600px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>