为div设置动画以从左向右移动然后向后移动

Question

我试图弄清楚如何设置div的动画来从左到右移动网页。然后我需要它停止它一直到正确的开始旋转然后旋转移动到页面的中心

到目前为止我有这个

@keyframes move
    {
        0%   {left: 0%;}
        50%  {left: 100%;}
        100% {left: 50%;;}
    }


    body {
        background: white;
    }

    .square {
        background: black;
        width:10px;
        height:10px;
        position: absolute;
        animation: move 5s;

    }

但我对css动画知之甚少

Answer 1

这可能吗？

我不确定广场是否应该在进入时继续旋转。如果没有简单的CSS解决方案，那就不同了。

＆＃13;

＆＃13;

@keyframes move
    {
        0%   {
            left: 0%;
          transform: rotate(0deg) ;
        }
        50%  {
          left: 100%;
          transform: rotate(0deg) ;
        }
        52% {
         transform: rotate(90deg);
        }
        70% {
          transform: rotate(180deg);
        }
        100% {
          left: 50%;
          transform: rotate(360deg);}
    }



    body {
        background: white;
    }

    .square {
        background: black;
        width:10px;
        height:10px;
        position: absolute;
        animation: move 5s linear forwards;
    }

＆＃13;

<div class="square"></div>

＆＃13;

＆＃13;

＆＃13;