为什么CSS动画有延迟？

Question

为什么CSS animation会出现延迟？

＆＃13;

＆＃13;

$(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();
  });
});

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我已经正确理解了你想要达到的最终效果，那么这种语法就会接近你的结局。

 $(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);
  });
 });

如果它接近你想要的你可以玩1.5秒的时间值和动画延迟（900），直到你得到最好的比喻。我也用答案更新了小提琴，以防你想玩一点。