javascript - Put a text in side of jquery animation -
i found post animate button when click on it, want know how can put text side of animation.
i tried:
<div class="heart">text</div>
&&
<div class="heart"><p>text</p></div>
but text come on animation... want text in right side of animation. how make ?
here updated snippet base on fiddle trying do.
$(".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 { {background-position:left;} { 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>
Comments
Post a Comment