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/square-spin.css
+113
View File
@@ -0,0 +1,113 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes square-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 square-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 square-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 square-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);
}
}
.square-spin > div
{
width: 50px;
height: 50px;
-webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-moz-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-o-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
background: #b8c2cc;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}