/*======================================================== 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; }