为什么太极图的旋转会有卡顿

div {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            box-sizing: border-box;
            width: 398px;
            height: 398px;
            margin: auto;
            border: 1px solid red;
            border-bottom: 200px solid red;
            border-radius: 50%;
            transform-origin: 50% 50%;
            animation-name: rotate;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            /*此处写代码*/
        }
        div:before{
            content: "";
            display: block;
            width: 60px;
            height: 60px;
            background-color: red;
            border: 69px solid white;
            border-radius: 50%;
            position: absolute;
            top: 100px;
            left: 197px;
            
        }
        div:after{
            content: "";
            display: block;
            width: 60px;
            height: 60px;
            background-color: white;
            border: 69px solid red;
            border-radius: 50%;
            position: absolute;
            top:100px;
            left:-1px;
            
        }
        @keyframes rotate{
            from{transform:rotate3d(0,0,1,0deg);}
            to{transform:rotate3d(0,0,1,360deg);}
        }