Box Animation

HTML
<div class="c-container"> <!-- That's the component!--> <div class="c-box"> <div class="c-box__inner"> <div class="c-box__inner__face c-box__inner__face--tt"></div> <div class="c-box__inner__face c-box__inner__face--fl"></div> <div class="c-box__inner__face c-box__inner__face--fr"></div> <div class="c-box__inner__face c-box__inner__face--bl"></div> <div class="c-box__inner__face c-box__inner__face--br"></div> </div> </div> </div>
SCSS
.c-box { $box-size: 80px; $box-color: #F25292; $box-animation-duration: 2s; perspective: $box-size * 1000; width: $box-size; height: $box-size; &__inner { width: $box-size; height: $box-size; position:relative; transform-style: preserve-3d; transform: rotateX(60deg) rotateZ(-45deg); &__face { width: $box-size; height: $box-size; position: absolute; // Top top &--tt { background-color: lighten($box-color, 10); transform: translate3d(0, 0, $box-size / 2); animation: slide-tt $box-animation-duration infinite ease forwards; } // Front left &--fl { background-color: $box-color; transform: translate3d(-($box-size / 2), 0, 0) rotateY(90deg); animation: slide-fl $box-animation-duration infinite ease forwards; } // Front right &--fr { background-color: darken($box-color, 10); transform: translate3d(0, $box-size / 2, 0) rotateX(90deg); animation: slide-fr $box-animation-duration infinite ease forwards; } // Back left &--bl { background-color: darken($box-color, 10); transform: translate3d(0, -($box-size / 2), 0) rotateX(90deg); animation: slide-bl $box-animation-duration infinite ease forwards; } // Back right &--br { background-color: $box-color; transform: translate3d($box-size / 2, 0, 0) rotateY(90deg); animation: slide-br $box-animation-duration infinite ease forwards; } } } @keyframes slide-tt { 16%, 80% { transform: translate3d(100%, 0, $box-size / 2); } 100% { transform: translate3d(0, 0, $box-size / 2); } } @keyframes slide-fr { 16%, 100% { transform: translate3d(0, $box-size / 2, 0) rotateX(90deg); } 32%, 80% { transform: translate3d(100%, $box-size / 2, 0) rotateX(90deg); } } @keyframes slide-bl { 32%, 100% { transform: translate3d(0, -($box-size / 2), 0) rotateX(90deg); } 48%, 80% { transform: translate3d(100%, -($box-size / 2), 0) rotateX(90deg); } } @keyframes slide-br { 48%, 100% { transform: translate3d($box-size / 2, 0, 0) rotateY(90deg);} 64%, 80% { transform: translate3d($box-size * 1.5, 0, 0) rotateY(90deg); } } @keyframes slide-fl { 64%, 100% { transform: translate3d(-($box-size / 2), 0, 0) rotateY(90deg); } 80% { transform: translate3d($box-size / 2, 0, 0) rotateY(90deg); } } } // Page style html, body { height: 100%; } .c-container { display: table; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); perspective: 1000px; }
JAVASCRIPT
Expand for more options Login