/* from: https://codepen.io/Nonoroazoro/pen/xWdPNp
call in html with
    <div class="root">
        <div class="wrap rotate90">
            <img class="arrow" src="./CSS_bounce_svg_01.svg" alt="arrow">
        </div>
    </div>
*/

.svgroot {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1d1f20;
}

.svgroot .svgwrap .svgarrow {
    animation: svgarrow-pulse 0.82s ease-in-out infinite;
}

.rotate90 {
    transform: rotate(90deg);
}

.rotate180 {
    transform: rotate(180deg);
}

.rotate270 {
    transform: rotate(270deg);
}

@keyframes svg-pulse {
    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    50% {
        -webkit-transform: translate3d(3px, 0, 0);
        transform: translate3d(3px, 0, 0);
    }
}


/* pulse for pin drop */

.pinpulse {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    overflow: visible;
    height: 3px !important;
    width: 6px !important;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    margin: 11px 0px 0px -12px;
    color: #aaa9a9;
    background: #d6d4d4;
}

.pinpulse:after {
    content: "";
    border-radius: 50%;
    height: 11px;
    width: 30px;
    position: absolute;
    margin: 0x 0 0 0px;
    animation: pinpulsate 0.82s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    box-shadow: 0px 0px 3px 2px #00cae9;
    animation-delay: 1.1s;
}

@keyframes pinpulsate {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
    }
}


/* animation for svg icons 
use with advance style inner lement instuction
    animation: svg-pulse 0.82s ease-in-out infinite;
*/

@keyframes svg-pulse {
    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    50% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}