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