Question

我想用CSS动画做出类似的举动：

我创建了一个文件，我正在使用关键帧，但效果不佳。

我希望圆圈能够在轴上完整转弯，从中心的固定点开始。

感谢。

HTML文件：

    <ul>
        <li style="animation: move1 2s infinite;"></li>
        <li style="animation: move2 2s infinite;"></li>
        <li style="animation: move3 2s infinite;"></li>
        <li style="animation: move4 2s infinite;"></li>
        <li style="animation: move5 2s infinite;"></li>
        <li style="animation: move6 2s infinite;"></li>
        <li style="animation: move7 2s infinite;"></li>
        <li style="animation: move8 2s infinite;"></li>
        <li style="animation: move9 2s infinite;"></li>
        <li style="animation: move10 2s infinite;"></li>
    </ul>

</body>

CSS FILE：

        body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    ul{
        display: block;
        width: 1920px;
        height: 1080px;
        margin: 0;
        padding: 0;
    }

    li {
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        /*transform: translate(-50%, -50%);*/
        border: 1px solid #000;
        border-radius: 100%;
        list-style: none;
    }

    @keyframes move1 {
      0% {
        transform: translate(-46%, -50%);
        width:400px; height:400px; 
      }
      50% {
        transform: translate(-54%, -50%);
        width:400px; height:400px; 
      }
      100% {
        transform: translate(-46%, -50%);
        width:400px; height:400px; 
      }
    }

    @keyframes move2 {
      0% {
        transform: translate(-50%, -46%);
        width:405px; height:405px; 
      }
      50% {
        transform: translate(-50%, -54%);
        width:405px; height:405px; 
      }
      100% {
        transform: translate(-50%, -46%);
        width:405px; height:405px; 
      }
    }

    @keyframes move3 {
      0% {
        transform: translate(-47%, -50%);
        width:410px; height:410px; 
      }
      50% {
        transform: translate(-55%, -50%);
        width:410px; height:410px; 
      }
      100% {
        transform: translate(-47%, -50%);
        width:410px; height:410px; 
      }
    }

    @keyframes move4 {
      0% {
        transform: translate(-50%, -48%);
        width:415px; height:415px; 
      }
      50% {
        transform: translate(-50%, -56%);
        width:415px; height:415px; 
      }
      100% {
        transform: translate(-50%, -48%);
        width:415px; height:415px; 
      }
    }

    @keyframes move5 {
      0% {
        transform: translate(-49%, -50%);
        width:420px; height:420px; 
      }
      50% {
        transform: translate(-57%, -50%);
        width:420px; height:420px; 
      }
      100% {
        transform: translate(-49%, -50%);
        width:420px; height:420px; 
      }
    }

    @keyframes move6 {
      0% {
        transform: translate(-50%, -50%);
        width:425px; height:425px; 
      }
      50% {
        transform: translate(-50%, -58%);
        width:425px; height:425px; 
      }
      100% {
        transform: translate(-50%, -50%);
        width:425px; height:425px; 
      }
    }

    @keyframes move7 {
      0% {
        transform: translate(-51%, -50%);
        width:430px; height:430px; 
      }
      50% {
        transform: translate(-59%, -50%);
        width:430px; height:430px; 
      }
      100% {
        transform: translate(-51%, -50%);
        width:430px; height:430px; 
      }
    }

    @keyframes move8 {
      0% {
        transform: translate(-50%, -52%);
        width:435px; height:435px; 
      }
      50% {
        transform: translate(-50%, -60%);
        width:435px; height:435px; 
      }
      100% {
        transform: translate(-50%, -52%);
        width:435px; height:435px; 
      }
    }

    @keyframes move9 {
      0% {
        transform: translate(-53%, -50%);
        width:440px; height:440px; 
      }
      50% {
        transform: translate(-61%, -50%);
        width:440px; height:440px; 
      }
      100% {
        transform: translate(-53%, -50%);
        width:440px; height:440px; 
      }
    }

    @keyframes move10 {
      0% {
        transform: translate(-50%, -54%);
        width:445px; height:445px; 
      }
      50% {
        transform: translate(-50%, -62%);
        width:445px; height:445px; 
      }
      100% {
        transform: translate(-50%, -54%);
        width:445px; height:445px; 
      }
    }

DEMO：http://plnkr.co/edit/Ntqtszay7BOg4pz8zCv4?p=preview

Answer 1

这是你想要的吗？ https://jsfiddle.net/DIRTY_SMITH/kn7qjg6c/5/

 @keyframes move1 {
      0% {
        transform: translate(-46%, -50%);
        width:400px; height:400px; 
      }
      50% {
        transform: translate(-54%, -50%);
        width:400px; height:400px; 
      }
      100% {
        transform: translate(-46%, -50%);
        width:400px; height:400px; 
      }
    }

    @keyframes move2 {
      0% {
        transform: translate(-50%, -46%);
        width:1000px; height:1000px; 
      }
      50% {
        transform: translate(-50%, -54%);
        width:405px; height:405px; 
      }
      100% {
        transform: translate(-50%, -46%);
        width:405px; height:405px; 
      }
    }

具有关键帧和变换的CSS3动画

1 个答案: