Question

我有一个<button>元素，当单击该元素时，按钮下移200px

在按钮的onclick事件中使用此代码来添加类，因此动画将运行：

JS

function anime() {
    var element = document.getElementById("tagd");
    element.classList.toggle("visible");    
}

HTML

<button onclick="anime()" id="tagd">

CSS

.visible {
    -webkit-animation: myfirst 5s 2; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: normal; /* Safari 4.0 - 8.0 */
    animation: myfirst 5s 2;
    animation-direction: normal;
    position: relative;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
    0%   {top: 0px;}
    25%  {top: 50px;}
    50%  {top: 100px;}
    75%  {top: 150px;}
    100% {top: 200px;}
} 

@keyframes myfirst {
    0%   {top: 0px;}
    25%  {top: 50px;}
    50%  {top: 100px;}
    75%  {top: 150px;}
    100% {top: 200px;}
}

所以问题是：

动画下降，然后回到第一位置。
动画播放不流畅（如果运行它，将会逐步播放不流畅）

Answer 1

由于您只是在更改按钮的位置，因此我可以为您提供以下建议

#tagd{ 
    transition: 5s transform
}
#tagd.visible{
    transform: translateY(200px) 
}

动画非常简单，因此使用此动画可以提高代码的可读性。琐碎，但使用“翻译”而不是“顶部”也可以改善视觉效果。

如果您愿意，请阅读有关此内容的更多信息： https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Answer 2

在代码中更改这些行，在这些行的末尾添加1而不是2。希望它对您有用。

-webkit-animation: myfirst 5s 1; /* Safari 4.0 - 8.0 */
 animation: myfirst 5s 1;

Answer 3

将属性will-change: top添加到.visible类

CSS动画播放不流畅

3 个答案: