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/cube-transition.css
+142
View File
@@ -0,0 +1,142 @@
/*========================================================
DARK LAYOUT
=========================================================*/
@-webkit-keyframes cube-transition
{
25%
{
-webkit-transform: translateX(50px) scale(.5) rotate(-90deg);
transform: translateX(50px) scale(.5) rotate(-90deg);
}
50%
{
-webkit-transform: translate(50px, 50px) rotate(-180deg);
transform: translate(50px, 50px) rotate(-180deg);
}
75%
{
-webkit-transform: translateY(50px) scale(.5) rotate(-270deg);
transform: translateY(50px) scale(.5) rotate(-270deg);
}
100%
{
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-moz-keyframes cube-transition
{
25%
{
-moz-transform: translateX(50px) scale(.5) rotate(-90deg);
transform: translateX(50px) scale(.5) rotate(-90deg);
}
50%
{
-moz-transform: translate(50px, 50px) rotate(-180deg);
transform: translate(50px, 50px) rotate(-180deg);
}
75%
{
-moz-transform: translateY(50px) scale(.5) rotate(-270deg);
transform: translateY(50px) scale(.5) rotate(-270deg);
}
100%
{
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-o-keyframes cube-transition
{
25%
{
-o-transform: translateX(50px) scale(.5) rotate(-90deg);
transform: translateX(50px) scale(.5) rotate(-90deg);
}
50%
{
-o-transform: translate(50px, 50px) rotate(-180deg);
transform: translate(50px, 50px) rotate(-180deg);
}
75%
{
-o-transform: translateY(50px) scale(.5) rotate(-270deg);
transform: translateY(50px) scale(.5) rotate(-270deg);
}
100%
{
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes cube-transition
{
25%
{
-webkit-transform: translateX(50px) scale(.5) rotate(-90deg);
-moz-transform: translateX(50px) scale(.5) rotate(-90deg);
-o-transform: translateX(50px) scale(.5) rotate(-90deg);
transform: translateX(50px) scale(.5) rotate(-90deg);
}
50%
{
-webkit-transform: translate(50px, 50px) rotate(-180deg);
-moz-transform: translate(50px, 50px) rotate(-180deg);
-o-transform: translate(50px, 50px) rotate(-180deg);
transform: translate(50px, 50px) rotate(-180deg);
}
75%
{
-webkit-transform: translateY(50px) scale(.5) rotate(-270deg);
-moz-transform: translateY(50px) scale(.5) rotate(-270deg);
-o-transform: translateY(50px) scale(.5) rotate(-270deg);
transform: translateY(50px) scale(.5) rotate(-270deg);
}
100%
{
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
.cube-transition
{
position: relative;
-webkit-transform: translate(-25px, -25px);
-moz-transform: translate(-25px, -25px);
-ms-transform: translate(-25px, -25px);
-o-transform: translate(-25px, -25px);
transform: translate(-25px, -25px);
}
.cube-transition > div
{
position: absolute;
top: -5px;
left: -5px;
width: 10px;
height: 10px;
-webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;
-moz-animation: cube-transition 1.6s 0s infinite ease-in-out;
-o-animation: cube-transition 1.6s 0s infinite ease-in-out;
animation: cube-transition 1.6s 0s infinite ease-in-out;
background-color: #b8c2cc;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.cube-transition > div:last-child
{
-webkit-animation-delay: -.8s;
-moz-animation-delay: -.8s;
-o-animation-delay: -.8s;
animation-delay: -.8s;
}