I would like to make the elements appear fluffy when I use school by using a plug-in that says, but when I scroll down, the elements that should have been hidden are initially displayed. After that, it disappears and the specified movement is displayed, so it seems to blink for a moment.

Does anyone know the cause?

In the html file, css is loaded first.

 var windowHeight = $(window).height(),
     topWindow = $(window).scrollTop();
  var targetPosition = $(this).offset().top;
  if(topWindow >targetPosition-windowHeight + 0){
.fadeInDown {
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
@-webkit-keyframes fadeInDown {
 0% {opacity: 0;-webkit-transform: translateY(-20px);}
 100% {opacity: 1;-webkit-transform: translateY(0);}
@keyframes fadeInDown {
 0% {opacity: 0;-webkit-transform: translateY(-20px);-ms-transform: translateY(-20px);transform: translateY(-20px);}
 100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
  • Answer # 1


    Isn't this because it is not specified by default on CSS side instead of JS?
    Show CSS → Hidden by JS because CSS is loaded first but nothing is specified for h2
    I think it is just a movement.

Related articles