1.transition（过渡）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="demo">
</div>
</body>
</html>
<style type="text/css">
.demo {
width: 200px;
height: 200px;
background-color: pink;
transition: width 0.5s ease-in-out 0s, height 0.5s ease-in-out 0s;
}
.demo:hover {
width: 600px;
height: 600px;
}
</style>
①属性说明transition： transition-property（要过渡的属性）、transition-duration（花费时间）、transition-timing-function（运动曲线）、transition-delay（何时开始）
②设置所有hover里面的属性都需要过渡可以简写为transition：all time（时间）；
③同一个属性里面多个参数，可以用逗号隔开
2.transform（变形）
######①移动：transform: translate translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="demo">
</div>
</body>
</html>
<style type="text/css">
.demo {
width: 200px;
height: 200px;
background-color: pink;
transition: all 0.5s;
}
.demo:active {
/*点击之后只移动X轴 */
/* transform: translateX(50px); */
/*点击之后只移动Y轴 */
/* transform: translateY(50px); */
/*点击之后只移动XY轴 */
/* transform: translate(300px, 300px); */
/*点击之后只移动自身像素的百分比轴 */
transform: translate(60%);
}
.demo:hover {
/*鼠标移上去div向上移动10px*/
margin-top: -10px;
/*鼠标移上去div出现阴影边框*/
box-shadow: 0 10px 5px rgba(0, 0, 0);
}
</style>
拓展：盒子定位在浏览器窗口居中对齐的完美写法
.demo {
width: 200px;
height: 200px;
background-color: pink;
left: 50%;
top: 50%;
/*absolute是以父级的宽度和高度为基准*/
position: absolute;
transform: translate(-50%, -50%);
}
######②变形：transform: scale scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数 拓展：鼠标放上去图片变大
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<section>
<img src="img/test.jpg">
</section>
</body>
</html>
<style type="text/css">
section {
width: 500px;
height: 322px;
margin: 0 auto;
overflow: hidden;
}
/*谁做动画谁加过渡*/
img {
transition: all 0.5s;
}
/*鼠标经过section盒子的时候里面的img缩放*/
section:hover img {
transform: scale(1.2);
}
</style>
