|
|
|
@import "prefixer";
|
|
|
|
@import "Bootstrap/variables";
|
|
|
|
|
|
|
|
@colorDark : @grayDark;
|
|
|
|
@colorLight : @grayLighter;
|
|
|
|
|
|
|
|
#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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|