Less code for whirlwind animation in CSS

whirlpool.less

/*
    ===================================================================================
    L E S S   C L A S S E S   F O R   A N I M A T I O N
    ===================================================================================
 */
.circle-common (@maxRadius, @borderSize, @sizeScale: 1, @scale:-1) {
    @currentRadius: @maxRadius * @sizeScale;
    @currentBorder: (@borderSize * @sizeScale);

    width:  @currentRadius;
    height: @currentRadius;

    border: @currentBorder solid rgba(0,183,229,0.9);
    border-right: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);

    background-color: rgba(0,0,0,0);
    opacity:.9;
    margin:0 auto;
    .rounded-corners(@currentRadius / 2);
    top: (@currentRadius + ((@maxRadius - @currentRadius) / 2)) * @scale;
    
}

.whirlpool-style (@mainRadius, @fontSize, @borderSize) {
    height:   @mainRadius;
    width:    @mainRadius;
    z-index:  20000;
    position: absolute;
    font-family: 'Lucida Grande', tahoma, Helvetica, sans-serif;
    color: @charcoal;

    .whirlpool-text {
        font-size:  @fontSize;
        position:   absolute;
        text-align: center;
        width:      @mainRadius;
        top:        @mainRadius * 0.45;
    }

     .whirlpool-outer-circle {
        
        box-shadow:    0 0 40px #2187e7;
        .circle-common(@mainRadius, @borderSize);

        -moz-animation:spinPulse 5s infinite ease-in-out;
        -webkit-animation:spinPulse 5s infinite linear;
    }

    .whirlpool-inner-circle {
        box-shadow:    0 0 15px #2187e7; 
        .circle-common(@mainRadius, @borderSize, 0.8);
        
        position: relative;

        -moz-animation:    spinoffPulse 10s infinite linear;
        -webkit-animation: spinoffPulse 10s infinite linear;
    }

    .whirlpool-small-circle {
        box-shadow:    0 0 6px #2187e7; 
        .circle-common(@mainRadius, @borderSize, 0.6, -2);
        
        position: relative;
        opacity:  0.5;

        -moz-animation:    reverseSpinoffPulse 20s infinite linear;
        -webkit-animation: reverseSpinoffPulse 20s infinite linear;
    }
}


/*
    ===================================================================================
    S T Y L E S   U S E D   F O R   A N I M A T I O N   C O N T A I N E R
    ===================================================================================
 */
.large-whirlpool {
    .whirlpool-style(300px, 1.75em, 10px);
}

.small-whirlpool {
    .whirlpool-style(100px, 1.0em, 4px);
}






/*
    ===================================================================================
    K E Y F R A M E S
    ===================================================================================
 */
@-moz-keyframes spinPulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
    50% { -moz-transform:rotate(145deg); opacity:1; }
    100% { -moz-transform:rotate(-320deg); opacity:0; }    
}
@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes reverseSpinoffPulse {
    0% { -moz-transform:rotate(360deg); }
    100% { -moz-transform:rotate(0deg); }
}


@-webkit-keyframes spinPulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
    25% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes reverseSpinoffPulse {
    0% { -webkit-transform:rotate(360deg); }
    100% { -webkit-transform:rotate(0deg); }
}
Raw