jquery - CSS动画关键帧不以内容为中心

我有以下按钮：

$(document).ready(function() {
	$('.sm-hover-ripple').hover(function() {
		var $this = $(this),
			$content = $this.html(),
			$height = $this.css('height').replace('px', ''),
			$width = $this.css('width').replace('px', ''),
			$padding_top = $this.css('padding-top').replace('px', ''),
			$padding_left = $this.css('padding-left').replace('px', ''),
			$padding_bottom = $this.css('padding-bottom').replace('px', ''),
			$padding_right = $this.css('padding-right').replace('px', ''),
			$background = $this.css('background');

		var $html = '' +
			'<div class="sm-button-filler" style="' +
				'height:'+ $height +'px; ' +
				'width: '+ $width +'px; ' +
				'margin: -'+ $padding_top +'px -'+ $padding_right +'px -'+ $padding_bottom +'px -'+ $padding_left +'px' +
			'">' +
				'<div class="sm-circle-hover" style="' +
					'line-height: '+ ($height / 100) * 150 +'px; ' +
					'background: '+ $background +'; ' +
					'height: '+ ($height / 100) * 150 +'px;  ' +
                    'width:'+ ($width - 10 ) +'px; ' +
					'border-radius: '+ $height +'px; ' +
					'margin: -'+ ((($height / 100) * 150) - $height) / 2 +'px 0 0 0;' +
					'animation:pulse-width 3000ms infinite}' +
					'@keyframes pulse-width{0%{width:'+ $width +'px}25%{width: '+ ($width - 10) +'px}50%{width: '+ ($width - 5) +'px}75%{width: '+ ($width - 10) +'px}100%{width:'+ $width +'px}}' +
				'">' +
					''+ $content +'' +
				'</div>' +
			'</div>';

		$this.html('<div class="sm-button-filler" style="height:'+ $height +'px; width: '+ $width +'px; margin: -'+ $padding_top +'px -'+ $padding_right +'px -'+ $padding_bottom +'px -'+ $padding_left +'px"><div class="sm-circle-hover" style="line-height: '+ ($height / 100) * 150 +'px; background: '+ $background +'; height: '+ ($height / 100) * 150 +'px;  width: '+ ($width - 10) +'px; -webkit-border-radius: '+ $height +'px; -moz-border-radius: '+ $height +'px;-ms-border-radius:'+ $height +'px; -o-border-radius: '+ $height +'px; border-radius: '+ $height +'px; margin: -'+ ((($height / 100) * 150) - $height) / 2 +'px 0 0 0;">'+ $content +'</div></div>');
	},
	function() {
		var $this = $(this),
			$content = $this.find('.sm-circle-hover').html();

		$this.html($content);
	});
});

.sm-raised-button {
  color: #fff;
  background:#2196F3;
  border: none;
  min-width: 64p;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  margin: 8px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: none;
}

.sm-button-filler {
  background: rgba(00, 00,00, .12);
  padding: 0 5%;
  overflow: hidden;
  transition: padding 300ms ease-in-out;
  animation: pulse-padding 3000ms infinite;
  @-keyframes pulse-padding {
    0% {
      padding: 0 0px;
    }
    25% {
      padding: 0 10px;
    }
    50% {
      padding: 0 5px;
    }
    75% {
      padding: 0 10px;
    }
    100% {
      padding: 0 0px;
    }
  }
}

.sm-circle-hover {
  transition: width 300ms ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sm-raised-button sm-hover-ripple">Hover ripple</button>

我没有列出所有其他浏览器前缀，但确实有它们。我不知道为什么动画不能在这里正常工作，所以当您使用它时动画应该可以工作。

以下是发生情况的一些图片：



我希望得到的与example类似（行为是一段简短的视频。这是重点示例）。

问题是，每当我将鼠标悬停在按钮上时，动画便会开始并起作用，但是它并未使内容保持居中，而是在左右移动。我希望有人可以帮助我将内容保留在中心。

提前致谢。

最佳答案

当您可以使用普通的旧CSS几乎完成所有操作时，我不明白为什么如此复杂：

a {
  display: inline-block;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1" viewBox="0 0 2 2"><circle fill="red" cx="1" cy="1" r="1" /></svg>') no-repeat 50% 50% orange;
  background-size: 0 0;
  transition: background-size .5s, background-color .7s;
  padding: 30px;
}
a:hover {
  background-size: 100% auto;
  background-color: red;
}

<a href="#">TestButton</a>

这样简化动画时，居中就变成了使用一些简单CSS的问题。

关于jquery - CSS动画关键帧不以内容为中心，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35294329/