Css实现上下无限跳动

来一张效果图

图中的三角形会一直上下跳动

        .arrow {
            position: absolute;
            bottom: 15%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            margin-left: -1%;
            animation-name: beat; /*动画名称*/
            animation-duration: 2s; /*设置秒数*/
            animation-timing-function: linear;/*速度曲线*/
            animation-iteration-count: infinite;/*播放次数*/
            animation-direction: alternate;/*逆向播放*/
            animation-play-state: running;/*正在运行*/
        }

        @keyframes beat {
            0% {
                bottom: 15%;
            }

            25% {
                bottom: 14%;
            }

            50% {
                bottom: 15%;
            }

            75% {
                bottom: 14%;
            }

            100% {
                bottom: 15%;
            }
        }

        .arrow img {
            width: 50%;
        }

   <div class="arrow">
       <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190823153828-b986b1c4b49fe49e959f8673a02c756.png" alt="箭头">
    div>