首先创建一个大盒子。

<div class="box">1</div>

样式：

.box{
      width: 100px;
      height: 100px;
      background-color: blue;
      text-align: center;
      line-height: 100px;
      color: aliceblue;
    }

简单的移动动画

 @keyframes move{
      /*从..形态到..形态*/
      from{
        transform: translateX(0);
      }
      to{
        transform: translateX(100px);
      }
    }

调用：

.box{
      /*动画名称 持续时间*/
      animation: move 4s;
    }

效果：

多形态移动动画

@keyframes move{

      0%{
        transform: translate(0,0);
      }
      25%{
        transform: translate(200px,0);
      }
      50%{
        transform: translate(200px,200px);
      }
      75%{
        transform: translate(0,200px);
      }
      100%{
        transform: translate(0,0);
      }