CSS3实现swap交换动画

1. div{    width: 200px;   
2. height: 200px;    color: #fff;   
3. border: #eee 2px solid;    }   
4. div > span{    width: 100%;   
5. height: 100%;    position: relative;   
6. background-color: #000;    display: flex;   
7. justify-content: center;    align-items: center;   
8. font-size: 80px;    animation: anims 1s ease-in;   
9. }  

然后加入动画,动画是位置的变化,和元素缩放状态的变化,再加入了透明度的变化.