@import "prefixer"; @import "Bootstrap/variables"; @colorDark : @gray-dark; @colorLight : @gray-lighter; #followingBalls { position : relative; height : 20px; width : 256px; margin : 50px auto; display : block; .ball { background-color : @colorDark; position : absolute; top : 0; left : 0; width : 20px; height : 20px; .border-radius(10px); .animation-name(bounce); .animation-duration(1.9s); .animation-iteration-count(infinite); .animation-direction(linear); } #ball-1 { .animation-delay(0s); } #ball-2 { .animation-delay(0.19s); } #ball-3 { .animation-delay(0.38s); } #ball-4 { .animation-delay(0.57s); } @keyframes bounce { 0% { left : 0px; background-color : @colorDark; } 50% { left : 236px; background-color : @colorLight; } 100% { left : 0px; background-color : @colorDark; } } @-moz-keyframes bounce { 0% { left : 0px; background-color : @colorDark; } 50% { left : 236px; background-color : @colorLight; } 100% { left : 0px; background-color : @colorDark; } } @-webkit-keyframes bounce { 0% { left : 0px; background-color : @colorDark; } 50% { left : 236px; background-color : @colorLight; } 100% { left : 0px; background-color : @colorDark; } } @-ms-keyframes bounce { 0% { left : 0px; background-color : @colorDark; } 50% { left : 236px; background-color : @colorLight; } 100% { left : 0px; background-color : @colorDark; } } @-o-keyframes bounce { 0% { left : 0px; background-color : @colorDark; } 50% { left : 236px; background-color : @colorLight; } 100% { left : 0px; background-color : @colorDark; } } }