.single7 { height: 12px; width: 12px; border-radius: 50%; -webkit-animation: single7 4s infinite linear; animation: single7 4s infinite linear; } @-webkit-keyframes single7 { 0%, 20%, 100% { -webkit-transform: translate(-15px, 150px); transform: translate(-15px, -15px); background-color: #F5D76E; } 25%, 45% { -webkit-transform: translate(15px, -15px); transform: translate(15px, -15px); background-color: #4183D7; } 50%, 70% { -webkit-transform: translate(15px, 15px); transform: translate(15px, 15px); background-color: #D64541; } 75%, 95% { -webkit-transform: translate(-15px, 15px); transform: translate(-15px, 15px); background-color: #26A65B; } } @keyframes single7 { 0%, 20%, 100% { -webkit-transform: translate(-15px, 150px); transform: translate(-15px, -15px); background-color: #F5D76E; } 25%, 45% { -webkit-transform: translate(15px, -15px); transform: translate(15px, -15px); background-color: #4183D7; } 50%, 70% { -webkit-transform: translate(15px, 15px); transform: translate(15px, 15px); background-color: #D64541; } 75%, 95% { -webkit-transform: translate(-15px, 15px); transform: translate(-15px, 15px); background-color: #26A65B; } }