过渡
概念
css属性允许某个或多个属性，从一个状态改变到另一个状态的过程中，慢慢地、圆滑地发生改变。可以产生一定的动画效果。例如：将div从原本的left属性为0的状态改变到left为300的状态，中间过程可以慢慢地进行。
初体验
<style>
.box{
width: 500px;
height: 200px;
border: 1px solid #000;
position: relative;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
left: 0;
top: 0;
transition: left 2s ease;
}
.box:hover .box1{
left: 300px;
}
</style>
<div class="box">
<div class="box1"></div>
</div>
语法
transition-property: css属性名称; /* 表示要产生过渡效果的css属性，多个属性使用逗号隔开，如果嫌麻烦，可以直接写all，表示所有属性 */
transition-duration: 数字s; /* 表示完成过渡效果需要的时长 */
transition-timing-function: 速度方式;
/*
linear 表示匀速
ease 逐渐减速 - 一开始比较快
ease-in 逐渐加速
ease-out 逐渐减速 - 一开始没有ease快
ease-in-out 先加速后减速
专门用于设计速度方式的贝塞尔曲线
分步骤动画
*/
transition-delay: 数字s; /* 表示延迟多少秒执行过渡效果 */
transition: 值；
transition的取值：是单一写法的4个值的组合，用空格隔开。第一个秒数表示过渡效果需要使用的时间，第二个秒数表示延迟多长时间后执行。通常情况下，我们在开发当中，只使用复合写法。
例：
<style>
.box{
width: 100px;
height: 100px;
background-color: #f00;
transition-property: /* all */ border-radius,background-color,width;
transition-duration: 2s; /* 表示完成过渡效果需要的时长 */
transition-timing-function: linear; /* linear表示匀速 */
transition-delay: 0s;
/* transition: all 2s ease 0s; */
}
.box:hover{
width: 300px;
height: 100px;
border-radius: 50%;
background-color: #0f0;
}
</style>
<div class="box"></div>
注意：过渡属性如果放在hover中修饰，表示只有鼠标移入的时候才会有过渡效果，移出的时候就没有过渡效果了，如果要在鼠标移入和移出的时候都能有过渡效果，就需要将过渡属性修饰在标签样式中。因为hover中修饰的样式，只有鼠标移入的时候才会执行，移出就不会执行了。
过渡案例
案例1
代码：
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid hotpink;
position: relative;
overflow: hidden;
}
.box img{
width: 300px;
height: 300px;
}
p{
padding: 0;
margin: 0;
width: 300px;
height: 300px;
position: absolute;
top: 300px;
left: 0;
transition: all 2s ease;
font-weight: bold;
font-size: 20px;
}
.box:hover p{
top: 0;
background-color: rgba(255,255,0,.5);
color: #0f0;
}
</style>
<div class="box">
<img src="./haha.jfif" alt="">
<p>
曾经我也是靠脸吃法的<br>
真的。。。<br>
知道有一天<br>
我快饿死了<br>
才好好工作的
</p>
</div>
案例2
代码：
<style>
body{
background-color: pink;
}
ul{
list-style: none;
padding: 0;
margin: 50px auto;
width: 400px;
height: 24px;
}
ul:after{
content: '';
display: block;
clear: both;
}
ul li{
float:left;
width: 60px;
height: 24px;
border: 1px solid #ccc;
box-sizing: border-box;
transition: all 1s ease;
}
ul li a{
display: block;
width: 60px;
height: 24px;
line-height: 24px;
padding-left: 20px;
text-decoration: none;
color: #000;
}
ul li:nth-child(1){
background-image: url("./bg.gif");
background-position: 0 0;
}
ul li:nth-child(2){
background-image: url("./bg.gif");
background-position: -64px 0;
}
ul li:nth-child(3){
background-image: url("./bg.gif");
background-position: -125px 0;
}
ul li:nth-child(4){
background-image: url("./bg.gif");
background-position: -187px 0;
}
ul li:nth-child(1):hover{
background-image: url("./bg.gif");
background-position: 0 22px;
}
ul li:nth-child(2):hover{
background-image: url("./bg.gif");
background-position: -64px 22px;
}
ul li:nth-child(3):hover{
background-image: url("./bg.gif");
background-position: -125px 22px;
}
ul li:nth-child(4):hover{
background-image: url("./bg.gif");
background-position: -187px 22px;
}
</style>
<ul>
<li>
<a href="">运输</a>
</li>
<li>
<a href="">前进</a>
</li>
<li>
<a href="">礼物</a>
</li>
<li>
<a href="">其他</a>
</li>
</ul>
案例3
代码：
<style>
ul, ol{
list-style: none;
padding: 0;
margin: 0;
}
ul{
width: 300px;
height: 50px;
margin: 50px auto;
}
ul:after{
content: '';
display: block;
clear: both;
}
ul>li{
float:left;
width: 100px;
height: 50px;
border: 1px solid #ccc;
box-sizing: border-box;
}
ul>li>a{
display: block;
width: 100px;
height: 50px;
line-height: 50px;
text-decoration: none;
color: #000;
text-align: center;
}
ul ol{
width: 100px;
text-align: center;
background-color: pink;
height: 0;
transition: all 0.5s ease-in-out;
overflow: hidden;
}
ul ol li a{
text-decoration: none;
color: #000;
text-align: center;
line-height: 30px;
}
ul>li:hover ol{
height: 90px;
}
</style>
<ul>
<li>
<a href="">我的好友</a>
<ol>
<li>
<a href="">张三</a>
</li>
<li>
<a href="">李四</a>
</li>
<li>
<a href="">王五</a>
</li>
</ol>
</li>
<li>
<a href="">我的坏友</a>
<ol>
<li>
<a href="">张小三</a>
</li>
<li>
<a href="">李小四</a>
</li>
<li>
<a href="">王小五</a>
</li>
</ol>
</li>
<li>
<a href="">黑名单</a>
<ol>
<li>
<a href="">张大三</a>
</li>
<li>
<a href="">李大四</a>
</li>
<li>
<a href="">王大五</a>
</li>
</ol>
</li>
</ul>
速度方式演示
代码：
<style>
ul{
list-style-type: none;
padding: 0;
margin: 0;
}
li{
height: 30px;
width: 200px;
background-color: #f00;
margin: 2px 0;
line-height: 30px;
}
ul:hover li:nth-child(1){
width: 500px;
transition: width 2s linear;
}
ul:hover li:nth-child(2){
width: 500px;
transition: width 2s ease;
}
ul:hover li:nth-child(3){
width: 500px;
transition: width 2s ease-in;
}
ul:hover li:nth-child(4){
width: 500px;
transition: width 2s ease-out;
}
ul:hover li:nth-child(5){
width: 500px;
transition: width 2s ease-in-out;
}
ul:hover li:nth-child(6){
width: 500px;
transition: width 2s cubic-bezier(0.735, 1.650, 0.315, -0.600);
}
ul:hover li:nth-child(7){
width: 500px;
transition: width 2s steps(5);
}
</style>
<ul>
<li>linear匀速</li>
<li>ease减速</li>
<li>ease-in加速</li>
<li>ease-out减速</li>
<li>ease-in-out先加速后减速</li>
<li>贝塞尔曲线</li>
<li>分步骤</li>
</ul>
2d
概念
俗称2d变换，指的是基于2d平面的角度，让标签元素发生变化。例如，让盒子移动、让盒子缩放、让盒子旋转。。。
平移
平移是让盒子在水平方向或垂直方向进行移动。
语法：
transform: translateX(像素值); /* 水平方向移动，正值向右，负值向左 */
transform: translateY(像素值); /* 垂直方向移动，正值向下，负值向上 */
transform: translate(水平方向像素值, 垂直方向像素值); /* 复合写法 */
缩放
缩放指让盒子可以缩放或放大一定的倍数。
语法：
transform: scaleX(横向放大倍数);
transform: scaleY(纵向放大倍数);
transform: scale(倍数); /* 大于1的放大，小于1缩小 */
旋转
旋转指让盒子绕着x轴或y轴进行旋转。
语法：
transform: rotateX(旋转的角度); /* 绕着x轴旋转多少角度 */
transform: rotateY(旋转的角度); /* 绕着y轴旋转多少角度 */
transform: rotate(旋转的角度); /* 绕着盒子中心点旋转多少角度 */
transform-origin: x轴坐标 y轴坐标; /* 调整旋转的中心，可以使用像素值，可以使用关键字 */
backface-visibility: hidden; /* 设置旋转180度以后背面是否可见 */
例：
<style>
.box{
width: 150px;
height: 200px;
border: 1px solid #000;
position: relative;
}
.box img{
width: 150px;
height: 200px;
position:absolute;
left: 0;
top: 0;
}
.box img{
backface-visibility: hidden;
transition: all 2s;
}
.box img:nth-child(2){
transform: rotateY(180deg);
}
.box:hover img:nth-child(1){
transform: rotateY(180deg);
backface-visibility: hidden;
}
.box:hover img:nth-child(2){
transform: rotateY(0deg);
}
</style>
<div class="box">
<img src="./back.png" alt="">
<img src="./black13.png" alt="">
</div>
