#wrap { position: relative; width: 300px; height: 300px; margin: 50px auto; } .circle { width: 300px; height: 300px; border-radius: 150px; background: pink; } #circleRight { position: absolute; left: 150px; width: 150px; height: 300px; overflow: hidden; } #circleRight-hidden { position: relative; left: -150px; width: 150px; height: 300px; overflow: hidden; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateRight 5s linear infinite; animation: rotateRight 5s linear infinite; } @-webkit-keyframes rotateRight { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } } @keyframes rotateRight { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } } #circleLeft { width: 150px; height: 300px; overflow: hidden; } #circleLeft-hidden { position: relative; left: 150px; width: 150px; height: 300px; overflow: hidden; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: rotateLeft 5s linear infinite; animation: rotateLeft 5s linear infinite; } #circleLeft .circle { position: relative; left: -150px; } @-webkit-keyframes rotateLeft { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } } @keyframes rotateLeft { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } } .revolution .shape.a { animation: revolution 3s infinite linear; top: calc(50% - 2em); left: calc(50% - 9em); transform-origin: 10em 50%; } .revolution .shape.b { animation: revolution 6s infinite linear reverse; background-color: red; width: 2em; height: 2em; left: calc(50% - 1em); top: calc(50% - 1em); } @keyframes revolution { 100% { transform: rotateZ(360deg); } } .principle { width: 100%; height: 200px; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); border-radius: 50%; }