CSS/SVG site left click micro animation

css-svg-site-left-click-micro-animation.markdown

CSS/SVG site left click micro animation

A Pen by Jamie Warburton on CodePen.

License.

index.html

<div class="mouse-prompt mouse-left-click">
    <div class="mouse-left-click__container">
        <div class="mouse-left-click__frame">
            <svg version="1.1" id="mouse" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    x="0px" y="0px" viewBox="0 0 54.9 91" style="enable-background:new 0 0 54.9 91;"
                    xml:space="preserve">
                <path id="XMLID_173_" class="st0"
                        linejoin="round" stroke-linecap="round" stroke-miterlimit="10" 
                        d="M27.4,3.6L27.4,3.6C14.2,3.6,3.5,14.3,3.5,27.5v36c0,13.2,10.7,23.9,23.9,23.9h0
                        c13.2,0,23.9-10.7,23.9-23.9v-36C51.4,14.3,40.7,3.6,27.4,3.6z"/>
            </svg>

        </div>
           
        <div class="mouse-left-click__mouse-left">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 27.4 91" style="enable-background:new 0 0 27.4 91;" xml:space="preserve">
                <path linejoin="round" stroke-linecap="round" stroke-miterlimit="10" class="draw-frame animate-draw"
                        d="M27.4,87.5L27.4,87.5c-13.2,0-23.9-10.7-23.9-23.9v-36c0-13.2,10.7-23.9,23.9-23.9h0"/>
            </svg>

        </div>
            
        <div class="mouse-left-click__mouse-right">
            <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 27.4 91" style="enable-background:new 0 0 27.4 91;" xml:space="preserve">
                <path linejoin="round" stroke-linecap="round" stroke-miterlimit="10" class="draw-frame animate-draw" 
                        d="M0,3.6L0,3.6c13.2,0,23.9,10.7,23.9,23.9v36c0,13.2-10.7,23.9-23.9,23.9h0"/>
            </svg>
        </div>
    </div>
    <p class="mouse-left-click__text">Left <span>Click</span></p>
</div>

style.scss

@import url(https://fonts.googleapis.com/css?family=Raleway);

body {
  background-color: #21272b;
}
.mouse-prompt {
    display:inline-block;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

.mouse-left-click {
    &__container {
        animation: clickMouse 5s ease-in-out infinite;
        left: 50%;
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        width: 48px;
        &:after {
            animation: leftClickBallSlide 5s ease-in-out infinite;
            background-color: #ffffff;
            border-radius: 100%;
            bottom: 0;
            content: '';
            height: 7px;
            left: 0;
            margin: auto;
            position: absolute;
            right: 0;
            top: 0;
            transform: translateY(55px);
            width: 7px;
        }
    }
    &__frame {
        position: absolute;
        width: 100%;
        z-index: 1;
        path {
            fill: none;
            opacity: 0.5;
            stroke-width: 3;
            stroke: #ffffff;
        }
    }
    &__mouse-left,
    &__mouse-right {
        position: absolute;
        width: 50%;
        z-index: 2;
    }
    &__mouse-left {
        .animate-draw {
            animation: DrawClickLineLeft 5s ease-in-out infinite;
        }
    }
    &__mouse-right {
        right: 0;
        .animate-draw {
            animation: DrawClickLine 5s ease-in-out infinite;
        }
    }
    .animate-draw {
        fill-opacity: 1;
        fill: none;
        stroke-width: 3;
        stroke: #ffffff;
    }
    &__text {
        animation: clickMouse 5s ease-in-out infinite;
        color: #ffffff;
        font-family: "Raleway", sans-serif;
        left: 50%;
        letter-spacing: 12px;
        margin-left: 6px;
        position: absolute;
        text-transform: uppercase;
        top: 90px;
        transform: translateX(-50%) translateY(0);
        white-space: nowrap;
        font-size: 14px;
        span {
            animation: fadeText 5s ease-in-out infinite;
        }
    }
}

/*Keyframes*/
@keyframes DrawClickLine {
    0% {
        stroke-dasharray: 120;
        stroke-dashOffset: 0;
        stroke-opacity: 1;
    }
    28% {
        stroke-dasharray: 120;
        stroke-dashOffset: 0;
        stroke-opacity: 1;
    }
    38% {
        stroke-dasharray: 120;
        stroke-dashOffset: 125;
        stroke-opacity: 1;
    }
    62% {
        stroke-dasharray: 120;
        stroke-dashOffset: 125;
        stroke-opacity: 1;
    }
    80% {
        stroke-dasharray: 120;
        stroke-dashOffset: 0;
        stroke-opacity: 1;
    }
}

@keyframes DrawClickLineLeft {
    0% {
        stroke-dasharray: 120;
        stroke-dashOffset: 0;
        stroke-opacity: 1;
    }
    28% {
        stroke-dasharray: 120;
        stroke-dashOffset: 0;
        stroke-opacity: 1;
    }
    38% {
        stroke-dasharray: 120;
        stroke-dashOffset: -70;
        stroke-opacity: 1;
    }
    62% {
        stroke-dasharray: 120;
        stroke-dashOffset: -70;
        stroke-opacity: 1;
    }
    80% {
        stroke-dasharray: 120;
        stroke-dashOffset: 0;
        stroke-opacity: 1;
    }
}

/*Mouse*/
@keyframes clickMouse {
    0% {
        transform: translateX(-50%) scale(1);
    }
    44% {
        transform: translateX(-50%) scale(1);
    }
    48% {
        transform: translateX(-50%) scale(0.92);
    }
    52% {
        transform: translateX(-50%) scale(1);
    }
}

/*Text*/
@keyframes fadeText {
    0% {
        opacity: 1;
    }
    28% {
        opacity: 1;
    }
    38% {
        opacity: 0.3;
    }
    62% {
        opacity: 0.3;
    }
    80% {
        opacity: 1;
    }
}

/*Mouse wheel*/
@keyframes leftClickBallSlide {
    0% {
        transform: translateY(55px);
    }
    28% {
        transform: translateY(55px);
    }
    38% {
        transform: translateY(18px) translateX(-5px);
    }
    62% {
        transform: translateY(18px) translateX(-5px);
    }
    80% {
        transform: translateY(55px);
    }
}