关于动画中的旋转和移动

@keyframes rote-loading {
        from {
            rotate: 0deg;
        }

        to {
            rotate: 360deg;
        }
    }


    @keyframes translate-loading {
        from {
            width: 0%;
        }

        to {
            width: 100%;
        }
    }


    * {
        margin: 0;
        padding: 0;
    }

    .rotate {
        display: flex;
        margin: auto;
    }

    .one {
        height: 100px;
        width: 100px;
        background-color: transparent;
        margin: auto;
        border: 5px solid;
        border-color: red rgb(4, 0, 250);
        border-radius: 50%;
        animation: rote-loading 2s linear infinite;
    }

    .two {
        height: 100px;
        width: 100px;
        background-color: transparent;
        margin: auto;
        border: 5px solid hsl(160, 88%, 50%);
        border-color: red transparent;
        border-radius: 50%;
        animation: rote-loading 2s linear infinite;
    }

    .three {
        height: 100px;
        width: 100px;
        background-color: transparent;
        margin: auto;
        border: 5px dashed hsl(160, 88%, 50%);
        border-color: red transparent;
        border-radius: 50%;
        animation: rote-loading 2s linear infinite;
    }

    .translate-out {
        width: 100%;
        height: 100px;
        background-color: #ccc;
        /* animation: translate-loading 2s linear infinite; */
        /* transition: all 4s; */
    }

    .add1 {
        animation: translate-loading 2s linear infinite;
    }

    /* .Two:hover {
        width: 0;
    } */
    .translate {
        width: 0%;
        height: 100%;
        background-color: #f00;
        animation: translate-loading 5s linear infinite;
    }

其中rote-loading是旋转动画，translate-loading是移动动画

    <div class="rotate">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
    <div class="translate-out">
        <div class="translate"></div>
    </div>
    <div class="translate-out add1"></div>

其中one，two，three只是旋转的不同样式，感兴趣的可以去自己复制代码瞧瞧

css博大精深，自己也只能算入门了，害