123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- /*========================================================
- DARK LAYOUT
- =========================================================*/
- @-webkit-keyframes cube-transition {
- 25% {
- transform: translateX(50px) scale(0.5) rotate(-90deg);
- }
- 50% {
- transform: translate(50px, 50px) rotate(-180deg);
- }
- 75% {
- transform: translateY(50px) scale(0.5) rotate(-270deg);
- }
- 100% {
- transform: rotate(-360deg);
- }
- }
- @keyframes cube-transition {
- 25% {
- transform: translateX(50px) scale(0.5) rotate(-90deg);
- }
- 50% {
- transform: translate(50px, 50px) rotate(-180deg);
- }
- 75% {
- transform: translateY(50px) scale(0.5) rotate(-270deg);
- }
- 100% {
- transform: rotate(-360deg);
- }
- }
- .cube-transition {
- position: relative;
- transform: translate(-25px, -25px);
- }
- .cube-transition > div {
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- width: 10px;
- height: 10px;
- position: absolute;
- top: -5px;
- left: -5px;
- background-color: #b8c2cc;
- -webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;
- animation: cube-transition 1.6s 0s infinite ease-in-out;
- }
- .cube-transition > div:last-child {
- -webkit-animation-delay: -0.8s;
- animation-delay: -0.8s;
- }
|