jubabox/jubaboxweb
1
0
Fork 0
Code Issues Pull Requests Releases Activity

new page

Browse Source
This commit is contained in:
Olusesan Ameye
2019-08-26 13:45:20 -04:00
parent 728bd3f771
commit 4b7c6a866e
1309 changed files with 386472 additions and 9389 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wwwjuba/app-assets/css/plugins/loaders/animations/ball-triangle-trace.css
+353
View File
@@ -0,0 +1,353 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes ball-triangle-path-1
{
33%
{
-webkit-transform: translate(25px, -50px);
transform: translate(25px, -50px);
}
66%
{
-webkit-transform: translate(50px, 0px);
transform: translate(50px, 0px);
}
100%
{
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-moz-keyframes ball-triangle-path-1
{
33%
{
-moz-transform: translate(25px, -50px);
transform: translate(25px, -50px);
}
66%
{
-moz-transform: translate(50px, 0px);
transform: translate(50px, 0px);
}
100%
{
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-o-keyframes ball-triangle-path-1
{
33%
{
-o-transform: translate(25px, -50px);
transform: translate(25px, -50px);
}
66%
{
-o-transform: translate(50px, 0px);
transform: translate(50px, 0px);
}
100%
{
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes ball-triangle-path-1
{
33%
{
-webkit-transform: translate(25px, -50px);
-moz-transform: translate(25px, -50px);
-o-transform: translate(25px, -50px);
transform: translate(25px, -50px);
}
66%
{
-webkit-transform: translate(50px, 0px);
-moz-transform: translate(50px, 0px);
-o-transform: translate(50px, 0px);
transform: translate(50px, 0px);
}
100%
{
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-webkit-keyframes ball-triangle-path-2
{
33%
{
-webkit-transform: translate(25px, 50px);
transform: translate(25px, 50px);
}
66%
{
-webkit-transform: translate(-25px, 50px);
transform: translate(-25px, 50px);
}
100%
{
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-moz-keyframes ball-triangle-path-2
{
33%
{
-moz-transform: translate(25px, 50px);
transform: translate(25px, 50px);
}
66%
{
-moz-transform: translate(-25px, 50px);
transform: translate(-25px, 50px);
}
100%
{
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-o-keyframes ball-triangle-path-2
{
33%
{
-o-transform: translate(25px, 50px);
transform: translate(25px, 50px);
}
66%
{
-o-transform: translate(-25px, 50px);
transform: translate(-25px, 50px);
}
100%
{
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes ball-triangle-path-2
{
33%
{
-webkit-transform: translate(25px, 50px);
-moz-transform: translate(25px, 50px);
-o-transform: translate(25px, 50px);
transform: translate(25px, 50px);
}
66%
{
-webkit-transform: translate(-25px, 50px);
-moz-transform: translate(-25px, 50px);
-o-transform: translate(-25px, 50px);
transform: translate(-25px, 50px);
}
100%
{
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-webkit-keyframes ball-triangle-path-3
{
33%
{
-webkit-transform: translate(-50px, 0px);
transform: translate(-50px, 0px);
}
66%
{
-webkit-transform: translate(-25px, -50px);
transform: translate(-25px, -50px);
}
100%
{
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-moz-keyframes ball-triangle-path-3
{
33%
{
-moz-transform: translate(-50px, 0px);
transform: translate(-50px, 0px);
}
66%
{
-moz-transform: translate(-25px, -50px);
transform: translate(-25px, -50px);
}
100%
{
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-o-keyframes ball-triangle-path-3
{
33%
{
-o-transform: translate(-50px, 0px);
transform: translate(-50px, 0px);
}
66%
{
-o-transform: translate(-25px, -50px);
transform: translate(-25px, -50px);
}
100%
{
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes ball-triangle-path-3
{
33%
{
-webkit-transform: translate(-50px, 0px);
-moz-transform: translate(-50px, 0px);
-o-transform: translate(-50px, 0px);
transform: translate(-50px, 0px);
}
66%
{
-webkit-transform: translate(-25px, -50px);
-moz-transform: translate(-25px, -50px);
-o-transform: translate(-25px, -50px);
transform: translate(-25px, -50px);
}
100%
{
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.ball-triangle-path
{
position: relative;
-webkit-transform: translate(-29.994px, -37.50938px);
-moz-transform: translate(-29.994px, -37.50938px);
-ms-transform: translate(-29.994px, -37.50938px);
-o-transform: translate(-29.994px, -37.50938px);
transform: translate(-29.994px, -37.50938px);
}
.ball-triangle-path > div:nth-child(1)
{
-webkit-animation-name: ball-triangle-path-1;
-moz-animation-name: ball-triangle-path-1;
-o-animation-name: ball-triangle-path-1;
animation-name: ball-triangle-path-1;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-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;
}
.ball-triangle-path > div:nth-child(2)
{
-webkit-animation-name: ball-triangle-path-2;
-moz-animation-name: ball-triangle-path-2;
-o-animation-name: ball-triangle-path-2;
animation-name: ball-triangle-path-2;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-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;
}
.ball-triangle-path > div:nth-child(3)
{
-webkit-animation-name: ball-triangle-path-3;
-moz-animation-name: ball-triangle-path-3;
-o-animation-name: ball-triangle-path-3;
animation-name: ball-triangle-path-3;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-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;
}
.ball-triangle-path > div
{
position: absolute;
width: 10px;
height: 10px;
border: 1px solid #b8c2cc;
border-radius: 100%;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.ball-triangle-path > div:nth-of-type(1)
{
top: 50px;
}
.ball-triangle-path > div:nth-of-type(2)
{
left: 25px;
}
.ball-triangle-path > div:nth-of-type(3)
{
top: 50px;
left: 50px;
}