Pulsar

arrow.svg

pulse.html

<style>
.press-here {
    position: relative;
    left: 90px;
    top: -80px;
    width: 164px;
    margin: 100pt auto;
}
.arrow {
    -webkit-animation: mover 2s infinite  alternate;
    animation: mover 2s infinite  alternate;
    position: relative;
    top: 0;
    left: 0;
    width: 164px;
    z-index: 2;
}
.shadow {
    position: absolute;
    top: 135px;
    width: 164px;
    z-index: 1;
    -webkit-animation: pulser 2s infinite  alternate;
    animation: pulser 2s infinite  alternate;
}
.demo {
    background: url("https://www.dropbox.com/s/pz0tbv6zji9cvbf/dash-outline.png?dl=0");
    width: 387px;
    z-index: 0;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}

@-webkit-keyframes pulser {
    0% { opacity: translateY(0); }
    100% { opacity: translateY(-20px); }
}
@keyframes pulser {
    0% { opacity: 1; }
    100% { opacity: 0.25; }
}
</style>

<div class="demo">
    <div class="press-here">
        <img class="arrow" src="arrow.svg"/>
        <img class="shadow" src="shadow.svg"/>
    </div>
</div>

shadow.svg