主页 / 问题 / 725296
Accepted
YourDeveloper
Asked:2020-10-01 14:06:47 +0000 UTC2020-10-01 14:06:47 +0000 UTC

如何顺利结束动画？

  • 772

如何平滑结束动画，即创建滚动时滚轮滚出并平滑停止的效果？

$(window).scroll(function() {
  if ($(this).scrollTop() > $(window).height()) {
    $('.wheel').addClass("active-left");
  } else {};
});
header {
  height: 1000px;
  background-color: green;
  text-transform: uppercase;
}

footer {
  height: 600px;
  background-color: blue;
}

.wheel {
  animation: infinite-spinning 150ms steps(8) infinite;
  width: 250px;
  height: 250px;
  position: relative;
  left: -250px;
  transition: all 3s ease
}

.wheel.active-left {
  left: 0;
  animation: infinite-spinning 250ms steps(8) 16;
}

@-webkit-keyframes infinite-spinning {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  прокрути вниз
</header>
<div class="wheel">
  <img src="http://www.freepngimg.com/download/car_wheel/2-2-car-wheel-png-picture.png" alt="wheel">
</div>
<footer>

</footer>

javascript

1 个回答

  1. Best Answer

    例如，像这样：

    $(window).scroll(function() {
  if ($(this).scrollTop() > $(window).height()) {
    $('.wheel').addClass("active-left");
  } else {};
});
    header {
  height: 1000px;
  background-color: green;
  text-transform: uppercase;
}

footer {
  height: 600px;
  background-color: blue;
}

.wheel {
  width: 250px;
  height: 250px;
  position: relative;
  left: 0;
  transform: translate(-250px, 0);
}

.wheel.active-left {
  animation: infinite-spinning 3s ease-in-out forwards;
}

@keyframes infinite-spinning {
  0% {
    transform: translate(-250px, 0) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  прокрути вниз
</header>
<div class="wheel">
  <img src="http://www.freepngimg.com/download/car_wheel/2-2-car-wheel-png-picture.png" alt="wheel">
</div>
<footer>

</footer>

    • 2

相关问题