Files
jubaboxweb/wwwjuba/app-assets/css/plugins/loaders/animations/ball-grid-pulse.css
T
2019-08-26 13:45:20 -04:00

232 lines
5.5 KiB
CSS

/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-grid-pulse
{
0%
{
-webkit-transform: scale(1);
transform: scale(1);
}
50%
{
-webkit-transform: scale(.5);
transform: scale(.5);
opacity: .7;
}
100%
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-moz-keyframes ball-grid-pulse
{
0%
{
-moz-transform: scale(1);
transform: scale(1);
}
50%
{
-moz-transform: scale(.5);
transform: scale(.5);
opacity: .7;
}
100%
{
-moz-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-o-keyframes ball-grid-pulse
{
0%
{
-o-transform: scale(1);
transform: scale(1);
}
50%
{
-o-transform: scale(.5);
transform: scale(.5);
opacity: .7;
}
100%
{
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes ball-grid-pulse
{
0%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
50%
{
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5);
opacity: .7;
}
100%
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.ball-grid-pulse
{
width: 57px;
}
.ball-grid-pulse > div:nth-child(1)
{
-webkit-animation-duration: 1.12s;
-moz-animation-duration: 1.12s;
-o-animation-duration: 1.12s;
animation-duration: 1.12s;
-webkit-animation-delay: .34s;
-moz-animation-delay: .34s;
-o-animation-delay: .34s;
animation-delay: .34s;
}
.ball-grid-pulse > div:nth-child(2)
{
-webkit-animation-duration: 1.42s;
-moz-animation-duration: 1.42s;
-o-animation-duration: 1.42s;
animation-duration: 1.42s;
-webkit-animation-delay: .59s;
-moz-animation-delay: .59s;
-o-animation-delay: .59s;
animation-delay: .59s;
}
.ball-grid-pulse > div:nth-child(3)
{
-webkit-animation-duration: 1.17s;
-moz-animation-duration: 1.17s;
-o-animation-duration: 1.17s;
animation-duration: 1.17s;
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-o-animation-delay: .3s;
animation-delay: .3s;
}
.ball-grid-pulse > div:nth-child(4)
{
-webkit-animation-duration: 1.49s;
-moz-animation-duration: 1.49s;
-o-animation-duration: 1.49s;
animation-duration: 1.49s;
-webkit-animation-delay: .07s;
-moz-animation-delay: .07s;
-o-animation-delay: .07s;
animation-delay: .07s;
}
.ball-grid-pulse > div:nth-child(5)
{
-webkit-animation-duration: .79s;
-moz-animation-duration: .79s;
-o-animation-duration: .79s;
animation-duration: .79s;
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
-o-animation-delay: .6s;
animation-delay: .6s;
}
.ball-grid-pulse > div:nth-child(6)
{
-webkit-animation-duration: 1.12s;
-moz-animation-duration: 1.12s;
-o-animation-duration: 1.12s;
animation-duration: 1.12s;
-webkit-animation-delay: -.01s;
-moz-animation-delay: -.01s;
-o-animation-delay: -.01s;
animation-delay: -.01s;
}
.ball-grid-pulse > div:nth-child(7)
{
-webkit-animation-duration: 1.39s;
-moz-animation-duration: 1.39s;
-o-animation-duration: 1.39s;
animation-duration: 1.39s;
-webkit-animation-delay: .46s;
-moz-animation-delay: .46s;
-o-animation-delay: .46s;
animation-delay: .46s;
}
.ball-grid-pulse > div:nth-child(8)
{
-webkit-animation-duration: 1.21s;
-moz-animation-duration: 1.21s;
-o-animation-duration: 1.21s;
animation-duration: 1.21s;
-webkit-animation-delay: -.09s;
-moz-animation-delay: -.09s;
-o-animation-delay: -.09s;
animation-delay: -.09s;
}
.ball-grid-pulse > div:nth-child(9)
{
-webkit-animation-duration: 1.45s;
-moz-animation-duration: 1.45s;
-o-animation-duration: 1.45s;
animation-duration: 1.45s;
-webkit-animation-delay: .31s;
-moz-animation-delay: .31s;
-o-animation-delay: .31s;
animation-delay: .31s;
}
.ball-grid-pulse > div
{
display: inline-block;
float: left;
width: 15px;
height: 15px;
margin: 2px;
-webkit-animation-name: ball-grid-pulse;
-moz-animation-name: ball-grid-pulse;
-o-animation-name: ball-grid-pulse;
animation-name: ball-grid-pulse;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
border-radius: 100%;
background-color: #b8c2cc;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}