首页 > 前端
箭头跳动动画
来源:TP课堂 时间:2022-01-07

image.png

<div class="arrow">→</div>
    <style>
        .arrow {
            position: absolute;
            bottom: 17%;
            left: 15%;

            -webkit-animation: bounce 2s infinite ease-in-out;
            z-index: 99;
        }

        @-webkit-keyframes bounce {

            0%,
            20%,
            60%,
            100% {
                -ms-transform: translateY(0);
            }

            0%,
            20%,
            60%,
            100% {
                -o-transform: translateY(0);
            }

            0%,
            20%,
            60%,
            100% {
                -moz-transform: translateY(0);
            }

            0%,
            20%,
            60%,
            100% {
                -webkit-transform: translateY(0);
            }

            40% {
                -webkit-transform: translateY(-20px);
            }

            80% {
                -webkit-transform: translateY(-10px);
            }
        }
    </style>