.single8 { width: 40px; height: 40px; border-radius: 50%; border: 10px solid red; -webkit-animation: single8 8s infinite linear; animation: single8 8s infinite linear; } @-webkit-keyframes single8 { 0%, 100%{ border: solid 20px #68C3A3; } 6.25% { border: solid 2px #68C3A3; } 12.5% { border: solid 2px #52B3D9; } 18.75% { border: solid 20px #52B3D9; } 25% { border: solid 20px #52B3D9; } 31.25% { border: solid 2px #52B3D9; } 37.5% { border: solid 2px #F4D03F; } 43.75% { border: solid 20px #F4D03F; } 50% { border: solid 20px #F4D03F; } 56.25% { border: solid 2px #F4D03F; } 62.5% { border: solid 2px #D24D57; } 68.75% { border: solid 20px #D24D57; } 75% { border: solid 20px #D24D57; } 81.25% { border: solid 2px #D24D57; } 87.5% { border: solid 2px #68C3A3; } 93.75% { border: solid 20px #68C3A3; } } @keyframes single8 { 0%, 100%{ border: solid 20px #68C3A3; } 6.25% { border: solid 2px #68C3A3; } 12.5% { border: solid 2px #52B3D9; } 18.75% { border: solid 20px #52B3D9; } 25% { border: solid 20px #52B3D9; } 31.25% { border: solid 2px #52B3D9; } 37.5% { border: solid 2px #F4D03F; } 43.75% { border: solid 20px #F4D03F; } 50% { border: solid 20px #F4D03F; } 56.25% { border: solid 2px #F4D03F; } 62.5% { border: solid 2px #D24D57; } 68.75% { border: solid 20px #D24D57; } 75% { border: solid 20px #D24D57; } 81.25% { border: solid 2px #D24D57; } 87.5% { border: solid 2px #68C3A3; } 93.75% { border: solid 20px #68C3A3; } }