需求：过渡移动座标位置。使用下面的两个css属性来实现。
transition：实现过渡效果。具体用法：transition
transform ：使用这个属性可以将元素旋转，缩放，移动，倾斜等，常见的是居中。具体用法：transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div {
width: 200px;
height: 200px;
background-color: #f00;
transition: all 3s ease;
}
body {
display: flex;
justify-content: center;
flex-direction: row;
}
</style>
<body>
<div id="dd" onclick="bg()"></div>
<div id="aa" onclick="ba()"></div>
<div id="cc" onclick="bc()"></div>
<div id="ee" onclick="be()"></div>
</body>
<script>
function bg() {
let el = document.getElementById('dd');
el.style.transform = 'translateX(100px) translateY(300px) scale(1) rotate(0deg)';
}
function ba() {
let el = document.getElementById('aa');
el.style.transform = 'translateX(100px) translateY(300px) scale(1) rotate(0deg)';
}
function bc() {
let el = document.getElementById('cc');
el.style.transform = 'translateX(100px) translateY(300px) scale(1) rotate(0deg)';
}
function be() {
let el = document.getElementById('ee');
el.style.transform = 'translateX(100px) translateY(300px) scale(1) rotate(0deg)';
}
</script>
</html>
个人认为基础非常重要，日常开发的时候，除了业务、样式交互需求也贼多，但实际上底层的东西基本差不多，会基础的了，就可以在上面变花样了。
比如：
按钮被按压的这个效果，就是用CSS3的animation属性来做的：在被点击的时候，也就是0%，初始高度、宽度不变，到50%的时候缩小高度、宽度（被按压的时候是有陷进去的感觉，通过缩小高度、宽度制造这个效果），100%的时候又恢复回原本的高度、宽度。通过控制动画的时间。就会有一个“被按压、又回弹的”的效果。