css从外屏移动端屏幕中间位置的动画效果

今天有个学妹让我帮她做个动画...然后总结一下.
嗯，一般来说让一个元素水平居中一般有

• magin: 0 auto;
• position:absolute; left:50%;transform:translateX(-50%);
• display:flex;justify-content: center;
  然而，当遇到动画时上面两种方法都不太好用
  推荐使用第三种方法...

 .box {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
   }

.item1 {
    width: 818px;
    margin-left: -3000px;
}

.item2 {
    width: 818px;
    margin-right: -3000px;
}

.move-1 {
    transform: translateX(1500px);
    transition: all 3s;
}

.move-2 {
    transform: translateX(-1500px);
    transition: all 3s;
}

不熟悉的同学不要着急, 我来跟大家讲一下flex布局：
flex-direction就是设置元素排列的方向，横着或者竖着。
flex-wrap就是设置元素超出时，该咋办
justify-content这个就是设置对齐方式
align-items设置另外一个轴的对齐方式
align-content 多根轴线时设置对齐方式
关于子元素上要设置的属性，我就不多说了，其实用到的时候去查一下文档就好了，用的最多的还说.box上的属性。