火箭 上下抖一抖的是怎么做出来的

Posted 2020-09-21 Lily.L

可以设置一个帧动画

@keyframes slideFromBottom {
    0% {
        transform: translateY(300%)
    }
    88% {
        transform: translateY(300%)
    }
    95% {
        transform: translateY(0)
    }
    97% {
        transform: translateY(20%)
    }
    100% {
        transform: translateY(0)
    }
}

之后在设置完成动画的类上加入animation

.screen-2__image_i_2_animate_done {
    animation: slideFromBottom 1.5s;
}