<svg class="artboard"> <circle cx="100" cy="25" r="25" fill="#daf" class="circle-1" /> <circle cx="175" cy="100" r="25" fill="#9e8" class="circle-2" /> <circle cx="100" cy="175" r="25" fill="#79f" class="circle-3" /> <circle cx="25" cy="100" r="25" fill="#8ce" class="circle-4" /> </svg>
.artboard { margin: 0 auto; width: 200px; height: 200px; position: relative; animation: spin 3s forwards infinite ease-out; } .circle-1 { animation: switch-top 3s infinite ease-out; } .circle-3 { animation: switch-bottom 3s infinite ease-out; } .circle-4 { animation: switch-left 3s infinite ease-out; } .circle-2 { animation: switch-right 3s infinite ease-out; } @keyframes spin { 0% { transform: rotate(0turn); } 30% { transform: rotate(1turn); } 50% { transform: rotate(1turn); } 80% { transform: rotate(2turn); } 100% { transform: rotate(2turn); } } @keyframes switch-top { 0% { transform: translateY(0px); } 30% { transform: translateY(0px); } 40% { transform: translateY(150px); } 80% { transform: translateY(150px); } 90% { transform: translateX(0px); } } @keyframes switch-bottom { 0% { transform: translateY(0px); } 30% { transform: translateY(0px); } 40% { transform: translateY(-150px); } 80% { transform: translateY(-150px); } 90% { transform: translateX(0px); } } @keyframes switch-left { 0% { transform: translateX(0px); } 35% { transform: translateX(0px); } 50% { transform: translateX(150px); } 85% { transform: translateX(150px); } 100% { transform: translateX(0px); } } @keyframes switch-right { 0% { transform: translateX(0px); } 35% { transform: translateX(0px); } 50% { transform: translateX(-150px); } 85% { transform: translateX(-150px); } 100% { transform: translateX(0px); } }