CSS3：基于transform与animatiin2D动画效果实现圆形移动变正方形后再变圆形

一.创建动画变化过程

1.自定义动画过程move1的创建需要通过@keyframes进行声明。

例如：

<style>
@keyframes move1{
   
}
</style>

2.自定义每个阶段的变化。

可以对div属性进行设置，也可以使用transform 的移动，选择，大小变化等方法。
总的过程从0%到100%，可以自由设置每个阶段

例如：

@keyframes move{
   
            0%{
    
            }
            48%{
   
                transform: translate(550px, 0px);
                border-radius:10%;
            }
            50%{
   
                transform: translate(600px, 0px);
                border-radius:0%;
            }
            52%{
   
                transform: translate(650px, 0px);
                background-color:rgb(85, 236, 143);
            }
            100%