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