<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡动画效果</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: yellow;
transition: all .5s; /*过渡写在本身，谁做动画写在谁身上 s ms*/
}
div:hover {
background-color: pink;
/*transform: translate(100px,100px); /**移动到x100,y100位置*/
/*transform: scale(1.3); /*先缩小到1.3倍，只有x,y默认 等比例缩放*/
/**顺序有关系：先移动后缩放，再旋转45°*/
transform: translate(100px,100px) scale(0.3) rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
原文：https://www.cnblogs.com/youzhishusheng/p/12337457.html