当滚动回到顶部并删除类时跳跃动画元素

Question

我有一个关于动画的问题。 所以我制作了这个简单的动画，它应该在滚动条上激活并将徽标向左移动并稍微摆动一下。一切都很好，但是当我滚动回顶部时，元素会跳到之前的位置，看起来不自然。有什么方法可以让过渡更顺畅吗？

在我仅使用这些属性进行简单转换之前：

.sticky {
    transition: all .3s ease-in .1s;
    transform: translateX(-70px) rotate(25deg);
}

它没有跳回，但是当我添加关键帧并使动画变得更复杂时，问题就出现了。

#logo {
    max-width: 50px;
    display: inline-block;
    position: fixed;
    transition: all .3s ease-in-out .5s;
    -webkit-transform-origin: 50% 50% 0;        
    transform-origin: 50% 50% 0;
    font-size:50px;
}

.sticky {
    transition: all .3s ease-in-out .5s;    
    -webkit-animation: swinging 4.5s ease-in-out both;
    animation: swinging 4.5s ease-in-out both;
    animation-fill-mode: both;       
}

@keyframes swinging {
    0% {transform: translateX(0px) rotate(-10deg);}
    20% {transform: translateX(-70px) rotate(10deg);}
    40% {transform: translateX(-60px) rotate(-5deg);}
    60% {transform: translateX(-70px) rotate(5deg);}
    80% {transform: translateX(-70px) rotate(-2deg);}
    100% {transform: translateX(-70px) rotate(0deg);}
}

JavaScript

window.onscroll = function() {
    myFunction()
};
        
var header = document.getElementById("logo");
var sticky = header.offsetTop;
        
function myFunction() {
    if (window.pageYOffset > sticky) {        
        header.classList.add("sticky");
    } else {  
        header.classList.remove("sticky");
    }
}

我将非常感谢任何解决方案和帮助。这是一个或多或少显示问题的简单代码笔：https://codepen.io/tonysnufkin/pen/jOVXbpP

Answer 1

一种解决方案是提供一个“反动画”，将元素从swinging 的最终位置返回到初始位置。例如：

@keyframes unswing {
  0% {transform: translateX(-70px)} /* final position of swinging transform */
  100% {transform: translateX(0)} /* original position */
}

这会在初始页面加载时产生动画效果。如果不希望这样做，请考虑将动画附加到一个类，当您删除 sticky 时，您可以使用 javascript 进行切换。

Updated Codepen