javascript - 将文本放在jQuery动画的一侧

我找到了这篇文章Animate like button when click on it，但是我想知道如何将动画的文字部分放在一边。

我试过了：

<div class="heart">TEXT</div>

<div class="heart"><p>TEXT</p></div>

但是文字超过了动画...
我只想要动画右侧的文本。
如何做到这一点？

最佳答案

这是您尝试制作的小提琴的更新片段。

$(".heart").on('click touchstart', function(){
  $(this).toggleClass('animating');
});


$(".heart").on('animationend', function(){
  $(this).toggleClass('animating');
});

.heart {
  float:left;
  margin-top: -1em;
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-image:url(  'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
  background-position: left;
  background-repeat:no-repeat;
  background-size:2900%;
 }

 .heart:hover {
  background-position:right;
 }

 .animating {
  animation: heart-burst .8s steps(28) 1;
 }

 @keyframes heart-burst {
 from {background-position:left;}
 to { background-position:righ;}
 }

<div class="heart-container">
  <div class="heart"></div>
  <p>TEXT</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Heart

javascript - 将文本放在jQuery动画的一侧