CODEWITHSUNDEEP
jqueryhtmlcssanimation
DCN
DCN

Reputation: 41

Why there is a delay in CSS animation?

Why there is a delay in CSS animation?

$(function() {
  $("#scrolltoblock").on("click", (e) => {
    let yBlockOffset = $("#scrolltome").offset().top;
    let headerHeight = $(".header").height();
    let margins = parseInt($("#scrolltome").css('margin-top'));
    let totalScroll = yBlockOffset - headerHeight - margins;

    $('html, body').animate({
      scrollTop: totalScroll
    }, 1000);
    $("#scrolltome").css("-animation", " target-fade-b 5s");
    $("#scrolltome").css("-webkit-animation", " target-fade-b 5s");
    $("#scrolltome").css("-moz-animation", " target-fade-b 5s");
    $("#scrolltome").css("-o-animation", " target-fade-b 5s");
    e.preventDefault();
  });
});
div {
  height: 300px;
  width: 100%;
  background-color: darkgreen;
  margin: 1em 0;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: orange;
  height: 100px;
  margin: 0;
}

#scrolltome {
  background-color: yellow;
}

@-webkit-keyframes target-fade-b {
  from {
    border: 100px;
    border-color: orange;
  }
  /* [1] */
  to {
    border: double;
    border-color: transparent;
  }
}

@-moz-keyframes target-fade-b {
  from {
    border: 100px;
    border-color: orange;
  }
  /* [1] */
  to {
    border: double;
    border-color: transparent;
  }
}

@-o-keyframes target-fade-b {
  from {
    border: 100px;
    border-color: orange;
  }
  /* [1] */
  to {
    border: double;
    border-color: transparent;
  }
}

@keyframes target-fade-b {
  from {
    border: 100px;
    border-color: orange;
  }
  /* [1] */
  to {
    border: double;
    border-color: transparent;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header"><a id="scrolltoblock" href="#scrolltoyellowblock">Click for Css Effect</a></div>
<div></div>
<div id="scrolltome"></div>
<div></div>

Upvotes: 1

Views: 89

Answers (1)

Anastasios Selmani
Anastasios Selmani

Reputation: 3689

If I have understood correctly the final effect you want to achieve maybe this syntax comes close to your endgoal.

 $(function() {
  $("#scrolltoblock").on("click", (e) => {
    let yBlockOffset = $("#scrolltome").offset().top;
    let headerHeight = $(".header").height();
    let margins = parseInt($("#scrolltome").css('margin-top'));
    let totalScroll = yBlockOffset - headerHeight - margins;

        $("#scrolltome").css("-animation"," target-fade-b 1.5s");

    $('html, body').animate({
        scrollTop: totalScroll
    }, 900);
  });
 });

If it is close to what you want you could play a little with the value of the time 1.5 sec and animation delay (900) until you get the best analogy for you. I updated the fiddle too with the answer in case you want to play a little with it.

Upvotes: 1

Related Questions