涟漪动画

Question

当我按住鼠标按钮（mousedown）时，我试图这样做，以便刻度保持不变并且不会消失。但是我尝试过的所有方法都无法正常工作:(。所以您可以帮我吗？

这是我的代码：

var count = 0;
$(".rippleAnimation").mousedown(function(e) {
  var time = new Date;
  md_time = time.getTime();

  // Setup
  var posX = $(this).offset().left,
    posY = $(this).offset().top,
    buttonWidth = $(this).width(),
    buttonHeight = $(this).height();

  // Add the element
  $(this).append("<span id='ripple" + count + "'></span>");


  // Make it round!
  if (buttonWidth >= buttonHeight) {
    buttonHeight = buttonWidth;
  } else {
    buttonWidth = buttonHeight;
  }

  // Get the center of the element
  var x = e.pageX - posX - buttonWidth / 2;
  var y = e.pageY - posY - buttonHeight / 2;

  /*var x = 0;
  var y = 0;*/

  // Add the ripples CSS and start the animation
  $("#ripple" + count).css({
    width: buttonWidth,
    height: buttonHeight,
    top: y + 'px',
    left: x + 'px'
  }).addClass("ripple rippleEffect");

  // Remove any old one
  //remove(count, default_animation_time);

  count++;
});

.top {
  width: 50px;
  height: 50px;
  background-color: #FF9800;
  border-radius: 50%;
}

.ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  position: absolute;
  opacity: 1;
}

.rippleEffect {
  -webkit-animation: rippleDrop .6s linear;
  animation: rippleDrop .6s linear;
}

@-webkit-keyframes rippleDrop {
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 1;
  }
}

@keyframes rippleDrop {
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#top">
  <div class="top rippleAnimation">
  </div>
</a>

感谢您的帮助：）

Answer 1

使用animation-fill-mode: forwards属性（MDN reference），动画将在最终关键帧处结束。这应该可以帮助您达到理想的效果。