简单的向下滑动按钮提示效果CSS如何实现？

<style>

.demo a {

    position: relative;

    top: 50px;

    left: 48%;

    z-index: 2;

    display: inline-block;

    -webkit-transform: translate(0, -50%);

    transform: translate(0, -50%);

    color: #fff;

    font : normal 400 20px/1 'Josefin Sans', sans-serif;

    letter-spacing: .1em;

    text-decoration: none;

    transition: opacity .3s;

    color: red;

}

.demo a:hover {

    opacity: .5;

}

#pulldown{

    float: left;

    height: 100px;

    width: 100%;

    margin: 50px 0px 120px;

}

#pulldown a {

    padding-top: 80px;

}

#pulldown a span {

    position: absolute;

    top: 0;

    left: 48%;

    width: 24px;

    height: 24px;

    margin-left: -12px;

    border-left: 1px solid red;

    border-bottom: 1px solid red;

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

    -webkit-animation: sdb07 2s infinite;

    animation: sdb07 2s infinite;

    opacity: 0;

    box-sizing: border-box;

}

#pulldown a span:nth-of-type(1) {

    -webkit-animation-delay: 0s;

    animation-delay: 0s;

}

#pulldown a span:nth-of-type(2) {

    top: 16px;

    -webkit-animation-delay: .15s;

    animation-delay: .15s;

}

#pulldown a span:nth-of-type(3) {

    top: 32px;

    -webkit-animation-delay: .3s;

    animation-delay: .3s;

}

@-webkit-keyframes sdb07 {

    0% {

        opacity: 0;

    }

    50% {

        opacity: 1;

    }

    100% {

        opacity: 0;

    }

}

@keyframes sdb07 {

    0% {

        opacity: 0;

    }

    50% {

        opacity: 1;

    }

    100% {

        opacity: 0;

    }

}

<div id="pulldown" class="demo">

<a href="#10years"><span></span><span></span><span></span>向下开启</a>

</div>