114 lines
3.4 KiB
CSS
114 lines
3.4 KiB
CSS
/*========================================================
|
|
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;
|
|
}
|