You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
2.1 KiB
131 lines
2.1 KiB
@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;
|
|
}
|
|
}
|
|
}
|