親addclass CSSアニメーションが機能するときに、削除しても何もしません。

Question

$(document).on("scroll",function(){ 
 
    if(window.pageYOffset > 0) { 
 
    $("body").addClass("scroll"); 
 
    }else{ 
 
    $("body").removeClass("scroll"); 
 
    } 
 
})

@keyframes fade { 
 
    0%,100% { opacity: 1 } 
 
    30%,70% { opacity: 0 } 
 
} 
 

 
.logo{ 
 
    animation: fade 0.7s linear; 
 
} 
 

 
div{ 
 
    height: 1000px; 
 
} 
 
span{ 
 
    position: fixed; 
 
    padding: 20px; 
 
} 
 
body.scroll span{ 
 
    animation: fade 0.7s linear; 
 
} 
 

 
@keyframes fade { 
 
    0%,100% { opacity: 1 } 
 
    30%,70% { opacity: 0 } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>test<span>hier</span></div>

「のhier」は再びフェードアウトとしていることがわかり、しかし、あなたは、彼らはまだ立ってトップにスクロールします。すでにスクロールしてもう一度アニメーションを上書きしたい場合は、体がクラスのスクロールになり、それが削除された場合はいつでも。

これはCSSでのみ行うことができますか？

codepen

Answer 1

編集：私はそのことについて申し訳ありませんが、あなたの質問に誤解だと思います！だから、スクロールダウンしながらスパンを消したいのですか？一度だけ？

---

問題は、あなたのフェードアニメーションのキーフレームにある

、試してみてください。

@keyframes fade { 
    0% { opacity: 1 } 
    100%{ opacity: 0 } 
    } 

は、私はまた、（あなたがbodyタグに追加するべきではありません）スパンにスクロールクラスを追加して、コメントを追加スパンへの小さな移行は、再出現がそれほど急には見えないようにする。コメント部分に表示されている場合は、最後の「イメージ」でアニメーションが停止するように「転送」を追加しました。

span{ 
    position: fixed; 
    padding: 20px; 
    transition: opacity .4s linear; 
} 
span.scroll{ 
    animation: fade 0.7s linear forwards; // <---- HERE 
}