div.g-container
    -for(var i=0; i<10; i++)
        .g-view 
            .g-text MAGICSS 
View Compiled
$count: 10;

html,
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

.g-container {
    position: relative;
    margin: 20vh auto;
    width: 33vw;
    height: 10vw;
    filter: blur(0.2vw) contrast(20);
}

.g-view {
    top: 0;
    left: 0;
    // transform: translate(-50%, -50%) rotate(0deg) scale(1);
    position: absolute;
    overflow: hidden;
    font-size: 6vw;
    height: 10vw;
    background: #000;
    mix-blend-mode: screen;
}

.g-text {
    top: 0;
    left: 0;
    position: absolute;
    width: 33vw;
    color: #fff;
    // text-align: center;
}

@for $i from 0 through $count {  
    .g-view:nth-child(#{$i}) {
        width: #{$i * 3}vw;
        animation: rotate 2s ease-in-out #{$i * 80}ms forwards;
        z-index: 10 - $i;
        
        $j: $i - 1;
        
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: #{$j * 3}vw;
            height: 10vw;
            background: #000;
            z-index: 1;
        }
    }    
}

@keyframes rotate {
    0% {
        transform: translate(0) rotate(0deg) scaleX(1) skewX(0) skewY(0);
    }
    50% {
        transform: translate(40vw, 20vh) rotate(-180deg) scaleX(1.5) skewX(40deg) skewY(-20deg);
    }
    100% {
        transform: translate(0vw) rotate(-360deg) scaleX(1) skewX(0) skewY(0);
    }
}


@keyframes move {
    100% {
        transform: translate(0, 4vw);
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.