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/triangle-skew-spin.css
+115
View File
@@ -0,0 +1,115 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes triangle-skew-spin
{
25%
{
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50%
{
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75%
{
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100%
{
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0);
}
}
@-moz-keyframes triangle-skew-spin
{
25%
{
-moz-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50%
{
-moz-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75%
{
-moz-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100%
{
-moz-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0);
}
}
@-o-keyframes triangle-skew-spin
{
25%
{
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50%
{
transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75%
{
transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100%
{
transform: perspective(100px) rotateX(0) rotateY(0);
}
}
@keyframes triangle-skew-spin
{
25%
{
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
-moz-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50%
{
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
-moz-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75%
{
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
-moz-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100%
{
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
-moz-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0);
}
}
.triangle-skew-spin > div
{
width: 0;
height: 0;
-webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-moz-animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-o-animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
border-right: 20px solid transparent;
border-bottom: 20px solid #b8c2cc;
border-left: 20px solid transparent;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}