css 添加弹跳效果以向下滚动按钮

Posted 2021-05-13

/*Bouncing Scroll-Down Arrow*/
 
.et_pb_fullwidth_header_scroll a {
-webkit-transform: translateZ(0px);
-moz-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
 .et_pb_fullwidth_header_scroll .et-pb-icon {
-webkit-animation: et_bounce 1s infinite;
-moz-animation: et_bounce 1s infinite;
-ms-animation: et_bounce 1s infinite;
-o-animation: et_bounce 1s infinite;
animation: et_bounce 1s infinite;
}
 
@-webkit-keyframes et_bounce {
    0% {
        -webkit-transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-15px);
    }
    100% {
        -webkit-transform: translateY(0px);
    }
}
@-moz-keyframes et_bounce {
    0% {
        -moz-transform: translateY(0);
    }
    40% {
        -moz-transform: translateY(-10px);
    }
    100% {
        -moz-transform: translateY(0px);
    }
}
@-ms-keyframes et_bounce {
    0% {
        -ms-transform: translateY(0);
    }
    40% {
        -ms-transform: translateY(-10px);
    }
    100% {
        -ms-transform: translateY(0px);
    }
}
@-o-keyframes et_bounce {
    0% {
        -o-transform: translateY(0);
    }
    40% {
        -o-transform: translateY(-10px);
    }
    100% {
        -o-transform: translateY(0px);
    }
}
@keyframes et_bounce {
    0% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}