swatches.scss

.flood .service:nth-of-type(1) {

    #redSwatch {
        @include animation-name(red-swatch-go);
            @extend .animation-settings;
            @include transform-origin(32%, 78%);  
    }

    &:hover #redSwatch {
            @include animation-name(red-swatch-off);

    }
    
    #orangeSwatch {
        @include animation-name(orange-swatch-go);
            @extend .animation-settings;
            @include transform-origin(30%, 78%);  
    }

    &:hover #orangeSwatch {
            @include animation-name(orange-swatch-off);

    }

    #yellowSwatch {
        @include animation-name(yellow-swatch-go);
            @extend .animation-settings;
            @include transform-origin(26%, 78%); 
    }

    &:hover #yellowSwatch {
            @include animation-name(yellow-swatch-off);

    }

    #greenSwatch {
        @include animation-name(green-swatch-go);
            @extend .animation-settings;
            @include transform-origin(28%, 78%);  
    }

    &:hover #greenSwatch {
            @include animation-name(green-swatch-off);

    }


}


// Animations

@include keyframes(red-swatch-go) {
    from    { @include transform(rotate(0deg)); }
    to      { @include transform(rotate(51deg)); }
}

@include keyframes(red-swatch-off) {
    from    { @include transform(rotate(51deg)); }
    to      { @include transform(rotate(0deg)); }
}

@include keyframes(orange-swatch-go) {
    from    { @include transform(rotate(0deg)); }
    to      { @include transform(rotate(40deg)); }
}

@include keyframes(orange-swatch-off) {
    from    { @include transform(rotate(40deg)); }
    to      { @include transform(rotate(0deg)); }
}

@include keyframes(yellow-swatch-go) {
    from    { @include transform(rotate(0deg)); }
    to      { @include transform(rotate(25deg)); }
}

@include keyframes(yellow-swatch-off) {
    from    { @include transform(rotate(25deg)); }
    to      { @include transform(rotate(0deg)); }
}

@include keyframes(green-swatch-go) {
    from    { @include transform(rotate(0deg)); }
    to      { @include transform(rotate(13deg)); }
}

@include keyframes(green-swatch-off) {
    from    { @include transform(rotate(13deg)); }
    to      { @include transform(rotate(0deg)); }
}