.mul5 { height: 50px; width: 50px; position: relative; } .mul5circle1 { height: 50px; width: 50px; position: absolute; border-radius: 50%; border: 6px solid #96281B; border-bottom-color: rgba(0,0,0,0); -webkit-animation: mul5circle1anim 3s infinite linear; animation: mul5circle1anim 3s infinite linear; } @-webkit-keyframes mul5circle1anim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes mul5circle1anim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .mul5circle2 { height: 34px; width: 34px; position: absolute; border-radius: 50%; border: 6px solid #C0392B; border-left-color: rgba(0,0,0,0); -webkit-animation: mul5circle2anim 4s infinite linear; animation: mul5circle2anim 4s infinite linear; } @-webkit-keyframes mul5circle2anim { 0% { -webkit-transform: translate(8px, 8px) rotate(0deg); transform: translate(8px, 8px) rotate(0deg); } 100% { -webkit-transform: translate(8px, 8px) rotate(-360deg); transform: translate(8px, 8px) rotate(-360deg); } } @keyframes mul5circle2anim { 0% { -webkit-transform: translate(8px, 8px) rotate(0deg); transform: translate(8px, 8px) rotate(0deg); } 100% { -webkit-transform: translate(8px, 8px) rotate(-360deg); transform: translate(8px, 8px) rotate(-360deg); } } .mul5circle3 { height: 18px; width: 18px; position: absolute; border-radius: 50%; border: 6px solid #E74C3C; border-right-color: rgba(0,0,0,0); -webkit-animation: mul5circle3anim 5s infinite linear; animation: mul5circle3anim 5s infinite linear; } @-webkit-keyframes mul5circle3anim { 0% { -webkit-transform: translate(16px, 16px) rotate(0deg); transform: translate(16px, 16px) rotate(0deg); } 100% { -webkit-transform: translate(16px, 16px) rotate(360deg); transform: translate(16px, 16px) rotate(360deg); } } @keyframes mul5circle3anim { 0% { -webkit-transform: translate(16px, 16px) rotate(0deg); transform: translate(16px, 16px) rotate(0deg); } 100% { -webkit-transform: translate(16px, 16px) rotate(360deg); transform: translate(16px, 16px) rotate(360deg); } }