.mul8 { height: 50px; width: 50px; } .mul8circ1 { height: 50px; width: 50px; border-radius: 50%; border: 5px solid #76cbad; border-bottom-color: rgba(0,0,0,0); border-top-color: rgba(0,0,0,0); -webkit-animation: mul8circ1Anim 2s infinite linear; animation: mul8circ1Anim 2s infinite linear; position: absolute; } .mul8circ2 { height: 50px; width: 50px; border-radius: 50%; border: 5px solid #127961; border-bottom-color: rgba(0,0,0,0); border-top-color: rgba(0,0,0,0); -webkit-animation: mul8circ2Anim 2.5s infinite linear; animation: mul8circ2Anim 2.5s infinite linear; position: absolute; } @-webkit-keyframes mul8circ1Anim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes mul8circ1Anim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes mul8circ2Anim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes mul8circ2Anim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }