css 如何使动画更流畅

mw3dktmi  于 2022-12-05  发布在  其他
关注(0)|答案(1)|浏览(192)

我制作了一个图像浮动的动画。
但是图像在到达终点时似乎在振动。
这是图片为link的网站
如果div Package img,则这是CSS

.newImg {
    position: relative;
    width: 472px;
    height: 414px;
    animation-name: updown;
    animation-duration: 5s;
    /* animation-delay: 1.5s; */
    animation-iteration-count: infinite;
    transition-timing-function: ease-in-out;
}

@keyframes updown {
    0% {
        top: 0px;
    }

    25% {
        top: 8px;
    }

    50% {
        top: 0px;
    }

    75% {
        top: 8px;
    }

    100% {
        top: 0px;
        ;
    }
}
iezvtpos

iezvtpos1#

由于top属性而看到的振动。请尝试改用translateY()。它会执行得更快,动画更平滑,并且不会影响布局。

@keyframes updown {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(8px);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(8px);
    }

    100% {
        transform: translateY(0);
    }
}

相关问题